在 Nuxt 中使用 Vite 插件

虽然 Nuxt 模块提供了广泛的功能，但有时特定的 Vite 插件可能更直接地满足你的需求。

¥While Nuxt modules offer extensive functionality, sometimes a specific Vite plugin might meet your needs more directly.

首先，我们需要安装 Vite 插件，在本例中，我们将使用 @rollup/plugin-yaml：

¥First, we need to install the Vite plugin, for our example, we'll use @rollup/plugin-yaml:

npm install @rollup/plugin-yaml

yarn add @rollup/plugin-yaml

pnpm add @rollup/plugin-yaml

bun add @rollup/plugin-yaml

接下来，我们需要导入并将其添加到我们的 nuxt.config.ts 文件中：

¥Next, we need to import and add it to our nuxt.config.ts file:

import yaml from '@rollup/plugin-yaml'

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

现在我们安装并配置了 Vite 插件，我们可以开始在项目中直接使用 YAML 文件了。

¥Now we installed and configured our Vite plugin, we can start using YAML files directly in our project.

例如，我们可以有一个 config.yaml 来存储配置数据，并将这些数据导入我们的 Nuxt 组件：

¥For example, we can have a config.yaml that stores configuration data and import this data in our Nuxt components:

greeting: "Hello, Nuxt with Vite!"

<script setup>
import config from '~/data/hello.yaml'
</script>

<template>
  <h1>{{ config.greeting }}</h1>
</template>