From 370653ac396dddd85ccca474bb9f6c34f2c03a40 Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <exer7um@gmail.com>
Date: Wed, 7 Jun 2023 00:36:01 +0300
Subject: [PATCH] docs: add info about vue configuration (#21303)

Co-authored-by: Unai Mengual <git@owln.ai>
---
 docs/1.getting-started/3.configuration.md | 57 +++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
index c7e3dc7457..b0a80f35bd 100644
--- a/docs/1.getting-started/3.configuration.md
+++ b/docs/1.getting-started/3.configuration.md
@@ -133,3 +133,60 @@ Name                                          | Config File             | How To
 | [Stylelint](https://stylelint.io)           | `.stylelintrc.json`     | [More Info](https://stylelint.io/user-guide/configure)
 | [TailwindCSS](https://tailwindcss.com)      |  `tailwind.config.js`   | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config/)
 | [Vitest](https://vitest.dev)                | `vitest.config.ts`      | [More Info](https://vitest.dev/config/)
+
+## Vue Configuration
+
+### With Vite
+
+If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`, you can do this in your `nuxt.config` file.
+
+- `vite.vue` for `@vitejs/plugin-vue`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
+- `vite.vueJsx` for `@vitejs/plugin-vue-jsx`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vite: {
+    vue: {
+      customElement: true
+    },
+    vueJsx: {
+      mergeProps: true
+    }
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#vue"}
+
+### With webpack
+
+If you use webpack and need to configure `vue-loader`, you can do this using `webpack.loaders.vue` key inside your `nuxt.config` file. The available options are [defined here](https://github.com/vuejs/vue-loader/blob/main/src/index.ts#L32-L62).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  webpack: {
+    loaders: {
+      vue: {
+        hotReload: true,
+      }
+    }
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#loaders"}
+
+### Enabling Experimental Vue Features
+
+You may need to enable experimental features in Vue, such as `defineModel` or `propsDestructure`. Nuxt provides an easy way to do that in `nuxt.config.ts`, no matter which builder you are using:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vue: {
+    defineModel: true,
+    propsDestructure: true
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#vue-1"}