Using Vite Plugins in Nuxt

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

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

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(),
    ],
  },
})

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

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>

Using Vite Plugins in Nuxt Modules

If you're developing a Nuxt module and need to add Vite plugins, you should use the addVitePlugin utility:

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

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

For environment-specific plugins in Nuxt 5+, use the applyToEnvironment() method:

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      // Plugin configuration
    }))
  },
})