方法一：透過 npm 安裝 (推薦)

這是最現代、也最推薦的管理方式。它會把函式庫當作專案的一部分來管理，版本控制更清晰。

安裝函式庫

打開終端機，執行指令。

Terminal

npm install animate.css

在 Nuxt 中註冊

打開 nuxt.config.ts，將函式庫的名稱加入到 css 陣列中。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css', // 我們自己的全域樣式
    'animate.css'           // 新增 animate.css
  ]
})

開始使用

現在你可以在任何元件中，直接使用 animate.css 提供的 class 名稱了！

Animation.vue

<template>
  <h1 class="animate__animated animate__bounce">這是一個會跳動的標題！</h1>
  <p class="animate__animated animate__fadeInUp">這是一段會浮現的文字。</p>
</template>

重新啟動專案 (npm run dev)，看看你的網頁是不是動起來了！

方法二：使用外部連結 (CDN)

有時候你只是想快速測試，或是不想把檔案下載到專案裡，這時可以使用 CDN (Content Delivery Network) 連結。

找到 CDN 連結

通常在函式庫的官網或 cdnjs.com 這類網站可以找到，例如：
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

加入到 head 中

打開 nuxt.config.ts，在 app.head 裡加入 link 設定。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // 在這裡加入外部 CSS 連結
        { 
          rel: 'stylesheet', 
          href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' 
        }
      ]
    }
  }
})

這樣 Nuxt 就會在每個頁面的 HTML <head> 區塊中，自動加上這行 <link> 標籤。

今日總結

今天我們學會了兩種引入外部 CSS 函式庫的方法：

npm 安裝：適合長期使用、需要版本管理的函式庫。

CDN 連結：適合快速測試或臨時使用的情境。

這大大擴展了我們的能力，網路上有成千上萬的 CSS 資源等著我們去探索！

特性	npm 安裝	CDN 連結
版本控制	精確	較不穩定
載入速度	打包優化	依賴外部網路
設定複雜度	需要安裝	直接使用
適用場景	正式專案	快速測試

預告：這只是冰山一角！對於像 Tailwind CSS 這樣的大型框架，社群通常會提供專門的「Nuxt Module (模組)」，讓整合變得更加無痛。這將是我們未來會深入探索的主題！