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]
+
+
+
+ {{ config.greeting }}
+
+```
+
+::
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