Features
Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
features
devLogs
Stream server logs to the client as you are developing. These logs can be handled in the dev:ssr-logs hook.
By default, this is enabled in development (when test mode is not active).
If set to silent, the logs will not be printed to the browser console.
export default defineNuxtConfig({
features: {
devLogs: true,
},
})
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.
It defaults to (id) => id.includes('.vue').
export default defineNuxtConfig({
features: {
inlineStyles: false, // or a function to determine inlining
},
})
noScripts
Turn off rendering of Nuxt scripts and JavaScript resource hints, so pages ship as pure HTML and CSS.
Possible values:
false(default): scripts are rendered normally.'production'(ortrue, which is normalized to'production'): scripts are omitted in production builds only, so hot module replacement and other development features keep working innuxt dev.'all': scripts are omitted in both development and production.
Pages served without scripts navigate with full-page loads. To keep navigation fast, Nuxt emits a speculation rules tag on these pages so supporting browsers prefetch and prerender the targets before the user follows a link. The tag is declarative JSON and executes no JavaScript. The rules are scoped to your page routes (which are safe to GET) rather than every same-origin link, so a link to a server route such as /logout is never speculatively fetched. A catch-all page (for example pages/[...slug].vue) matches every path, which widens this back to all same-origin links.
Client-side navigation to a route covered by a noScripts route rule triggers a full document load instead, so the route is actually served without scripts rather than being rendered by the client-side router. Pages whose routes are known at build time to be covered by such a rule are also excluded from the client bundle entirely.
Scripted pages emit their own speculation rules tag scoped to the noScripts route patterns, so browsers can prefetch and prerender those targets before a full-page navigation to them. When view transitions are enabled, these pages also opt into declarative cross-document view transitions to animate the navigation.
export default defineNuxtConfig({
features: {
noScripts: 'production', // or 'all' | false
},
})
You can also disable scripts per-route with the noScripts route rule, which applies in all modes:
export default defineNuxtConfig({
routeRules: {
'/blog/**': { noScripts: true },
},
})
When noScripts applies to a rendered page, the following are omitted from the HTML:
- the Nuxt entry
<script>tags - the import map for the entry chunk
- the inlined payload
<script>(and the payload preload link, when payload extraction is enabled) - JavaScript resource hints (
preloadandprefetchlinks for JS chunks)
CSS is unaffected: stylesheet links and inlined styles are still rendered, so the page looks identical. The page simply never hydrates, which means nothing on it is interactive.
A few interactions to be aware of:
- Routes with the
noScriptsroute rule are always rendered with the buffered (non-streaming) renderer. - Server components that only render static HTML work fine, but components hydrated with
nuxt-clientand interactive island slots rely on an inline script to relocate teleported content, so they will not become interactive on anoScriptsroute. Whenfeatures.noScriptsis set app-wide and component islands are active, Nuxt also falls back to buffered rendering for this reason.
noScripts with prerendering, islands and lazy hydration.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
This enables early access to Nuxt features or flags.
Setting compatibilityVersion to 5 changes defaults throughout your Nuxt configuration to opt in to Nuxt v5 behaviour, including enabling the Vite Environment API.
export default defineNuxtConfig({
future: {
compatibilityVersion: 5,
},
})
multiApp
This enables early access to the experimental multi-app support. You can follow the tracker issue #21635 to see the progress of multi-app support in Nuxt.
export default defineNuxtConfig({
future: {
multiApp: true,
},
})
typescriptBundlerResolution
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and Vite.
It improves type support when using modern libraries with exports.
See the original TypeScript pull request.
You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: false,
},
})