Nuxt 4.3

Nuxt 4.3 brings powerful new features for layouts, caching, and developer experience – plus significant performance improvements under the hood.

🗂️ Route Rule Layouts

You can now set layouts directly in route rules using the new appLayout property (#31092). This provides a centralized, declarative way to manage layouts across your application without scattering definePageMeta calls throughout your pages.

export default defineNuxtConfig({
  routeRules: {
    '/admin/**': { appLayout: 'admin' },
    '/dashboard/**': { appLayout: 'dashboard' },
    '/auth/**': { appLayout: 'minimal' }
  }
})

This is particularly useful for:

• Admin panels with a shared layout across many routes
• Marketing pages that need a different layout from the app
• Auth flows with a minimal, distraction-free layout

📦 ISR/SWR Payload Extraction

Payload extraction now works with ISR (incremental static regeneration), SWR (stale-while-revalidate) and cache routeRules (#33467). Previously, only pre-rendered pages could generate _payload.json files.

This means:

• Client-side navigation to ISR/SWR pages can use cached payloads
• CDNs (Vercel, Netlify, Cloudflare) can cache payload files alongside HTML
• Fewer API calls during navigation – data can be prefetched and served from the cached payload

export default defineNuxtConfig({
  routeRules: {
    '/products/**': { 
      isr: 3600, // Revalidate every hour
    }
  }
})

🧹 Dev Mode Payload Extraction

Related to the above, payload extraction now also works in development mode (#30784). This makes it easier to test and debug payload behavior without needing to run a production build.

🚫 Disable Modules from Layers

When extending Nuxt layers, you can now disable specific modules that you don't need (#33883). Just pass false to the module's options:

export default defineNuxtConfig({
  extends: ['../shared-layer'],
  // disable @nuxt/image from layer
  image: false,
})

🏷️ Route Groups in Page Meta

Route groups (folders wrapped in parentheses like (protected)/) are now exposed in page meta (#33460). This makes it easy to check which groups a route belongs to in middleware or anywhere you have access to the route.

<script setup lang="ts">
// This page's meta will include: { groups: ['protected'] }
useRoute().meta.groups
</script>

export default defineNuxtRouteMiddleware((to) => {
  if (to.meta.groups?.includes('protected') && !isAuthenticated()) {
    return navigateTo('/login')
  }
})

This provides a clean, convention-based approach to route-level authorization without needing to add definePageMeta to every protected page.

🎨 Layout Props with setPageLayout

The setPageLayout composable now accepts a second parameter to pass props to your layout (#33805):

export default defineNuxtRouteMiddleware((to) => {
  setPageLayout('admin', {
    sidebar: true,
    theme: 'dark'
  })
})

<script setup lang="ts">
defineProps<{
  sidebar?: boolean
  theme?: 'light' | 'dark'
}>()
</script>

🔧 #server Alias

A new #server alias provides clean imports within your server directory (#33870), similar to how #shared works:

// Before: relative path hell
import { helper } from '../../../../utils/helper'

// After: clean and predictable
import { helper } from '#server/utils/helper'

The alias includes import protection – you can't accidentally import #server code from client or shared contexts.

🪟 Draggable Error Overlay

The development error overlay introduced in Nuxt 4.2 is now draggable and can be minimized (#33695). You can:

• Drag it to any corner of the screen (it snaps to edges)
• Minimize it to a small pill button when you want to keep working
• Your position and minimized state persist across page reloads

This is a quality-of-life improvement when you're iterating on fixes and don't want the overlay blocking your view.

⚙️ Async Plugin Constructors

Module authors can now use async functions when adding build plugins (#33619):

export default defineNuxtModule({
  async setup() {
    // Lazy load only when actually needed
    addVitePlugin(() => import('my-cool-plugin').then(r => r.default()))
    
    // No need to load webpack plugin if using Vite
    addWebpackPlugin(() => import('my-cool-plugin/webpack').then(r => r.default()))
  }
})

This enables true lazy loading of build plugins, avoiding unnecessary code loading when plugins aren't needed.

🚀 Performance Improvements

This release includes several performance optimizations for faster builds:

• Hook filters - Internal plugins now use filters to avoid running hooks unnecessarily (#33898)
• SSR styles optimization - The nuxt:ssr-styles plugin is now significantly faster (#33862, #33865)
• Layer alias transform - Skipped when using Vite (it handles this natively) (#33864)
• Route rules compilation - Route rules are now compiled into a client chunk using rou3, removing the need for radix3 in the client bundle and eliminating app manifest fetches (#33920)

🎨 Inline Styles for Webpack/Rspack

The inlineStyles feature now works with webpack and rspack builders (#33966), not just Vite. This enables critical CSS inlining for better Core Web Vitals regardless of your bundler choice.

⚠️ Deprecations

statusCode → status, statusMessage → statusText

In preparation for Nitro v3 and H3 v2, we're moving to use Web API naming conventions (#33912). The old properties still work but are deprecated in advance of v5:

- throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+ throw createError({ status: 404, statusText: 'Not Found' })

🐛 Bug Fixes

Notable fixes in this release:

• Fixed head component deduplication using key attribute (#33958, #33963)
• Fixed async data properties not being reactive in Options API (#34119)
• Fixed useCookie unsafe number parsing during decode (#34007)
• Fixed NuxtPage not re-rendering when nested NuxtLayout has layouts disabled (#34078)
• Fixed client-side pathname decoding for non-ASCII route aliases (#34043)
• Fixed suspense remounting when navigating after pending state (#33991)
• Fixed clipboard copy in error overlay (#33873)
• Enabled allowArbitraryExtensions by default in TypeScript config (#34084)
• Added noUncheckedIndexedAccess to server tsconfig for safer typing (#33985)

export default defineNuxtConfig({
  nitro: {
    typescript: {
      tsConfig: {
        compilerOptions: {
          noUncheckedIndexedAccess: false
        }
      }
    }
  }
})

📚 Documentation

• Improved module author guides with clearer structure (#33803)
• Added MCP setup instructions for Claude Desktop (#33914)
• Added layers directory documentation (#33967)
• Added Deno package manager examples (#34070)
• Clarified type-checking context limitations for server routes (#33964)

✅ Upgrading

Our recommendation for upgrading is to run:

npx nuxt upgrade --dedupe

This will deduplicate your lockfile and help ensure you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.

👉 Full Release Notes

Thank you to all of the many contributors to this release! 💚