docs: add vite plugin recipe (#27043)

This commit is contained in:
Sébastien Chopin 2024-05-03 10:42:20 +02:00 committed by GitHub
parent 2c39b3ce61
commit 9735fbc7e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 0 deletions

View File

@ -0,0 +1,65 @@
---
navigation.title: 'Vite Plugins'
title: Using Vite Plugins in Nuxt
description: 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`:
::code-group
```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
```
::
Next, we need to import and add it to our [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) 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 [components/Hello.vue]
<script setup>
import config from '~/data/hello.yaml'
</script>
<template>
<h1>{{ config.greeting }}</h1>
</template>
```
::

View File

@ -0,0 +1,3 @@
title: Recipes
titleTemplate: '%s · Recipes'
icon: i-ph-cooking-pot-duotone