2023-12-25 14:03:29 +00:00
---
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]
2024-02-13 14:35:48 +00:00
export default defineNuxtConfig({
2023-12-25 14:03:29 +00:00
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]
2024-02-13 14:35:48 +00:00
export default defineNuxtConfig({
2023-12-25 14:03:29 +00:00
features: {
noScripts: true
}
})
```
## `future`
2023-12-26 20:37:20 +00:00
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.
2023-12-25 14:03:29 +00:00
2024-05-01 20:29:34 +00:00
### compatibilityVersion
::important
2024-06-11 09:56:24 +00:00
This configuration option is available in Nuxt v3.12+.
2024-05-01 20:29:34 +00:00
::
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:
2024-05-02 13:24:31 +00:00
srcDir: '.',
dir: {
app: 'app'
},
2024-05-01 20:29:34 +00:00
experimental: {
compileTemplate: true,
templateUtils: true,
relativeWatchPaths: true,
defaults: {
useAsyncData: {
deep: true
}
}
2024-05-07 12:37:02 +00:00
},
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: false
}
2024-05-01 20:29:34 +00:00
}
})
```
2023-12-25 14:03:29 +00:00
### 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]
2024-02-13 14:35:48 +00:00
export default defineNuxtConfig({
2023-12-25 14:03:29 +00:00
future: {
typescriptBundlerResolution: true
}
})
```