mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-29 09:02:03 +00:00
docs: add info about vue configuration (#21303)
Co-authored-by: Unai Mengual <git@owln.ai>
This commit is contained in:
parent
199595f3af
commit
370653ac39
@ -133,3 +133,60 @@ Name | Config File | How To
|
|||||||
| [Stylelint](https://stylelint.io) | `.stylelintrc.json` | [More Info](https://stylelint.io/user-guide/configure)
|
| [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/)
|
| [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/)
|
| [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"}
|
||||||
|
Loading…
Reference in New Issue
Block a user