Special Nuxt Features on an opt-in basis

Nuxt is configured with sensible but extendable defaults. The nuxt.config.ts file supports an opt-in features namespace to enable or disable specific runtime behaviors, alongside a future namespace to adopt upcoming framework defaults and experimental multi-app support. It is located at the root of a Nuxt project and can be used to add custom scripts, register modules or change rendering modes.

In this article, we’re going to check some “extra” options that go further and could help unlock new possibilities.

Features

The features block controls optional runtime behaviors in your application:

devLogs

• Streams SSR server logs to the browser during development.

• Default: true in dev

• Can be set to 'silent' to suppress logs

export default defineNuxtConfig({
  features: {
    devLogs: true // | 'silent'
  }
})

inlineStyles

• Inlines component CSS into rendered HTML (Vite only).

• Default: (id) => id.includes('.vue')

• Can be set to false or a callback for per-component control

export default defineNuxtConfig({
  features: {
    inlineStyles: false // | (id) => boolean
  }
})

noScripts

• Disables injection of Nuxt client scripts and JS resource hints.

• Options:

• true or 'production' – disable in production

• 'all' – disable in both dev & prod

• false – leave enabled

export default defineNuxtConfig({
  features: {
    noScripts: true, // or 'production' | 'all' | false
  },
})

Future

Enable upcoming defaults and experimental core changes under future:

compatibilityVersion

• Opt into defaults of a future major release (e.g., v5)

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5
  }
})

multiApp

• Early access to experimental multi-app support within a single Nuxt instance

export default defineNuxtConfig({
  future: {
    multiApp: true
  }
})

Experimental Features

asyncContext

• Enables native async context to be accessible for nested composables in Nuxt and Nitro, reducing "Nuxt instance is unavailable" errors

export default defineNuxtConfig({
  experimental: {
    asyncContext: true,
  },
})

buildCache

• Caches Nuxt build artifacts based on a hash of the configuration and source files for faster rebuilds

export default defineNuxtConfig({
  experimental: {
    buildCache: true,
  },
})

cookieStore

• Enables CookieStore support to listen for cookie updates and refresh useCookie ref values:

export default defineNuxtConfig({
  experimental: {
    cookieStore: true,
  },
})

purgeCachedData

• Nuxt will automatically purge cached data from useAsyncData and nuxtApp.static.data to prevent memory leaks. But you can decide to clean up Nuxt static and asyncData caches on route navigation.

export default defineNuxtConfig({
  experimental: {
    purgeCachedData: false, // enabled by default
  },
})