mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: add vite plugin recipe (#27043)
This commit is contained in:
parent
2c39b3ce61
commit
9735fbc7e4
65
docs/2.guide/4.recipes/2.vite-plugin.md
Normal file
65
docs/2.guide/4.recipes/2.vite-plugin.md
Normal 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>
|
||||||
|
```
|
||||||
|
|
||||||
|
::
|
3
docs/2.guide/4.recipes/_dir.yml
Normal file
3
docs/2.guide/4.recipes/_dir.yml
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
title: Recipes
|
||||||
|
titleTemplate: '%s · Recipes'
|
||||||
|
icon: i-ph-cooking-pot-duotone
|
Loading…
Reference in New Issue
Block a user