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:

::code-group{sync="pm"}

bash [npm] npm install @rollup/plugin-yaml

bash [yarn] yarn add @rollup/plugin-yaml

bash [pnpm] pnpm add @rollup/plugin-yaml

bash [bun] bun add @rollup/plugin-yaml

bash [deno] deno add npm:@rollup/plugin-yaml

::

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

```ts [nuxt.config.ts] 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:

::code-group

```yaml [data/hello.yaml]
greeting: "Hello, Nuxt with Vite!"

```vue [app/components/Hello.vue]

::

## Using Vite Plugins in Nuxt Modules

If you're developing a Nuxt module and need to add Vite plugins, you should use the [`addVitePlugin`](/docs/4.x/api/kit/builder#addviteplugin) utility:

```ts [modules/my-module.ts]
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:

```ts [modules/my-module.ts] import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'

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

::important If you're writing code that needs to access resolved Vite configuration, you should use the config and configResolved hooks within your Vite plugin, rather than using Nuxt's vite:extend, vite:extendConfig and vite:configResolved. ::

::read-more{to="/docs/4.x/api/kit/builder#addviteplugin"} Read more about addVitePlugin in the Nuxt Kit documentation. ::