Использование плагинов Vite в Nuxt

Как подключить плагины Vite в проекте Nuxt.

Модули Nuxt закрывают большинство задач, но иногда удобнее подключить именно плагин 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(),
    ],
  },
})

После установки и настройки плагина YAML можно импортировать в коде как модуль.

Например, в data/hello.yaml лежит приветствие — его можно подключить в компоненте:

greeting: "Привет, Nuxt и Vite!"

Плагины Vite в модулях Nuxt

Если вы разрабатываете Nuxt-модуль и нужно добавить плагины Vite, используйте утилиту addVitePlugin:

modules/my-module.ts
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import yaml from '@rollup/plugin-yaml'

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

Для плагинов, зависящих от окружения, в Nuxt 5+ используйте метод applyToEnvironment():

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'
      },
      // настройки плагина
    }))
  },
})
Если коду нужен доступ к итоговой конфигурации Vite, используйте хуки config и configResolvedвнутри вашего плагина Vite, а не хуки Nuxt vite:extend, vite:extendConfig и vite:configResolved.
Подробнее о addVitePlugin в документации Nuxt Kit.