mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-05 03:47:12 +00:00
1.3 KiB
1.3 KiB
navigation.title | title | description |
---|---|---|
Vite Plugins | Using Vite Plugins in Nuxt | Learn how to integrate Vite plugins into your Nuxt project. |
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
:
::package-managers
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:
::code-group
greeting: "Hello, Nuxt with Vite!"
<script setup>
import config from '~/data/hello.yaml'
</script>
<template>
<h1>{{ config.greeting }}</h1>
</template>
::