工程部署
EcosystemExtensibility
Nuxt 模組 (Modules)
Nuxt 擁有強大的模組生態系，讓您能像組裝積木一樣快速擴充專案功能。
什麼是模組？
Nuxt 模組 (Modules) 是 Nuxt 框架的核心擴充機制。不同於一般的 Vue Plugin，Nuxt 模組可以在應用程式的生命週期中介入，自動設定路由、註冊元件、注入中間件，甚至修改 Webpack/Vite 設定。
簡單來說： 如果您發現自己在重複做某些設定（例如設定 Tailwind、設定 PWA、設定 Google Analytics），那麼很可能已經有一個 Nuxt 模組幫您做好了。
安裝與使用
在 Nuxt 4 中，安裝模組非常簡單。我們推薦使用 nuxi CLI 工具來安裝，它會自動更新您的 package.json 和 nuxt.config.ts。
Terminal
npx nuxi@latest module add image 上述指令會安裝 @nuxt/image 並自動將其加入設定檔。如果您偏好手動安裝：
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@pinia/nuxt',
'@nuxt/ui'
]
}) 常用模組推薦
Tailwind CSS
官方支援的 Tailwind 整合。支援 HMR、自動設定與優化。
@nuxtjs/tailwindcssPinia
Vue 的官方狀態管理庫。模組版本提供了更好的 SSR 支援與自動引入。
@pinia/nuxtNuxt Image
自動圖片優化、格式轉換 (WebP/Avif) 與響應式圖片生成。
@nuxt/imageNuxt SEO
全方位的 SEO 解決方案，包含 Sitemap、Robots.txt、Schema.org 等。
@nuxtjs/seo 模組設定
大多數模組都可以在 nuxt.config.ts 中進行設定。通常模組會使用其名稱作為設定鍵值。
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/image'],
// Image 模組的設定
image: {
dir: 'assets/images',
format: ['webp', 'avif']
}
})