Nuxt で Vite プラグインを使用する

Nuxt モジュールは豊富な機能を提供しますが、特定の Vite プラグインがあなたのニーズに直接合致する場合もあります。

まず、Vite プラグインをインストールする必要があります。例として、@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 ファイルに追加する必要があります。

import yaml from '@rollup/plugin-yaml'

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

Vite プラグインをインストールして設定したので、プロジェクトで YAML ファイルを直接使用できるようになります。

例えば、設定データを保存する config.yaml を作成し、そのデータを Nuxt コンポーネントにインポートできます。

greeting: "Hello, Nuxt with Vite!"

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

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

Nuxt モジュールで Vite プラグインを使用する

Nuxt モジュールを開発していて Vite プラグインを追加する必要がある場合は、addVitePlugin ユーティリティを使用する必要があります。

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import yaml from '@rollup/plugin-yaml'

export default defineNuxtModule({
  setup () {
    addVitePlugin(yaml())
  },
})