mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-15 10:24:50 +00:00
100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
---
|
|
title: "Features"
|
|
description: "Enable or disable optional Nuxt features to unlock new possibilities."
|
|
---
|
|
|
|
Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
|
|
|
|
## `features`
|
|
|
|
### inlineStyles
|
|
|
|
Inlines styles when rendering HTML. This is currently available only when using Vite.
|
|
|
|
You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
features: {
|
|
inlineStyles: true // or a function to determine inlining
|
|
}
|
|
})
|
|
```
|
|
|
|
### noScripts
|
|
|
|
Disables rendering of Nuxt scripts and JS resource hints. Can also be configured granularly within `routeRules`.
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
features: {
|
|
noScripts: true
|
|
}
|
|
})
|
|
```
|
|
|
|
## `future`
|
|
|
|
There is also a `future` namespace for early opting-in to new features that will become default in a future (possibly major) version of the framework.
|
|
|
|
### compatibilityVersion
|
|
|
|
::important
|
|
This configuration option is available in Nuxt v3.12+.
|
|
::
|
|
|
|
This enables early access to Nuxt features or flags.
|
|
|
|
Setting `compatibilityVersion` to `4` changes defaults throughout your
|
|
Nuxt configuration to opt-in to Nuxt v4 behaviour, but you can granularly re-enable Nuxt v3 behaviour
|
|
when testing (see example). Please file issues if so, so that we can
|
|
address in Nuxt or in the ecosystem.
|
|
|
|
```ts
|
|
export default defineNuxtConfig({
|
|
future: {
|
|
compatibilityVersion: 4,
|
|
},
|
|
// To re-enable _all_ Nuxt v3 behaviour, set the following options:
|
|
srcDir: '.',
|
|
dir: {
|
|
app: 'app'
|
|
},
|
|
experimental: {
|
|
sharedPrerenderData: false,
|
|
compileTemplate: true,
|
|
resetAsyncDataToUndefined: true,
|
|
templateUtils: true,
|
|
relativeWatchPaths: true,
|
|
normalizeComponentNames: false
|
|
defaults: {
|
|
useAsyncData: {
|
|
deep: true
|
|
}
|
|
}
|
|
},
|
|
unhead: {
|
|
renderSSRHeadOptions: {
|
|
omitLineBreaks: false
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
### typescriptBundlerResolution
|
|
|
|
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
|
|
for frameworks like Nuxt and [Vite](https://vitejs.dev/guide/performance.html#reduce-resolve-operations).
|
|
|
|
It improves type support when using modern libraries with `exports`.
|
|
|
|
See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
future: {
|
|
typescriptBundlerResolution: true
|
|
}
|
|
})
|
|
```
|