Плагины Vite в Nuxt

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

Модули Nuxt закрывают много задач, но иногда конкретный плагин Vite подходит прямее.

Сначала установите плагин 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 прямо в проекте.

Например, файл config.yaml с данными и компонент:

greeting: "Hello, Nuxt with Vite!"

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