在 Nuxt 中使用 Vite 插件 · 食譜

雖然 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 3 中，您的路由是由 pages 目錄內檔案的結構所定義的。然而，由於它在底層使用了 vue-router，Nuxt 為您提供了幾種在專案中加入自訂路由的方法。

Nuxt 中的自訂 useFetch

如何在 Nuxt 3 中建立自訂的 fetcher 來呼叫您的外部 API。

在 Nuxt 中使用 Vite 外掛