在 Nuxt 中使用 Vite 外掛

瞭解如何將 Vite 外掛整合到您的 Nuxt 專案中。

雖然 Nuxt 模組提供了廣泛的功能，但有時特定的 Vite 外掛可能更直接地滿足您的需求。

首先，我們需要安裝 Vite 外掛，在我們的示例中，我們將使用 @rollup/plugin-yaml

npm install @rollup/plugin-yaml

接下來，我們需要匯入它並將其新增到我們的 nuxt.config.ts 檔案中

nuxt.config.ts
import yaml from '@rollup/plugin-yaml'

export default defineNuxtConfig({
  vite: {
    plugins: [
      yaml(),
    ],
  },
})

現在我們已經安裝並配置了 Vite 外掛，我們可以直接在我們的專案中使用 YAML 檔案。

例如，我們可以有一個 config.yaml 檔案，它儲存配置資料並將這些資料匯入到我們的 Nuxt 元件中

greeting: "Hello, Nuxt with Vite!"

在 Nuxt 模組中使用 Vite 外掛

如果您正在開發一個 Nuxt 模組並且需要新增 Vite 外掛，您應該使用 addVitePlugin 工具

modules/my-module.ts
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import yaml from '@rollup/plugin-yaml'

export default defineNuxtModule({
  setup () {
    addVitePlugin(yaml())
  },
})
如果您正在編寫需要訪問已解析的 Vite 配置的程式碼，您應該在您的 Vite 外掛中使用 config 和 configResolved 鉤子，而不是使用 Nuxt 的 vite:extend、vite:extendConfig 和 vite:configResolved。
在 Nuxt Kit 文件中閱讀更多關於 addVitePlugin 的資訊。