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

Модули 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: "Привет, Nuxt и Vite!"

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

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