diff --git a/docs/2.guide/3.going-further/8.custom-routing.md b/docs/2.guide/4.recipes/1.custom-routing.md similarity index 100% rename from docs/2.guide/3.going-further/8.custom-routing.md rename to docs/2.guide/4.recipes/1.custom-routing.md diff --git a/docs/2.guide/4.recipes/2.vite-plugin.md b/docs/2.guide/4.recipes/2.vite-plugin.md new file mode 100644 index 0000000000..6a9b1e8a28 --- /dev/null +++ b/docs/2.guide/4.recipes/2.vite-plugin.md @@ -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] + + + +``` + +:: diff --git a/docs/2.guide/4.recipes/_dir.yml b/docs/2.guide/4.recipes/_dir.yml new file mode 100644 index 0000000000..b63c755e5f --- /dev/null +++ b/docs/2.guide/4.recipes/_dir.yml @@ -0,0 +1,3 @@ +title: Recipes +titleTemplate: '%s ยท Recipes' +icon: i-ph-cooking-pot-duotone