\r\n```\r\n\r\n```ts [middleware/auth.ts]\r\nexport default defineNuxtRouteMiddleware((to) => {\r\n if (to.meta.groups?.includes('protected') && !isAuthenticated()) {\r\n return navigateTo('/login')\r\n }\r\n})\r\n```\r\n\r\nThis provides a clean, convention-based approach to route-level authorization without needing to add `definePageMeta` to every protected page.\r\n\r\n## 🎨 Layout Props with `setPageLayout`\r\n\r\nThe `setPageLayout` composable now accepts a second parameter to pass props to your layout ([#33805](https://github.com/nuxt/nuxt/pull/33805)):\r\n\r\n```ts [middleware/admin.ts]\r\nexport default defineNuxtRouteMiddleware((to) => {\r\n setPageLayout('admin', {\r\n sidebar: true,\r\n theme: 'dark'\r\n })\r\n})\r\n```\r\n\r\n```vue [layouts/admin.vue]\r\n\r\n```\r\n\r\n## 🔧 `#server` Alias\r\n\r\nA new `#server` alias provides clean imports within your server directory ([#33870](https://github.com/nuxt/nuxt/pull/33870)), similar to how `#shared` works:\r\n\r\n```ts [server/api/users/[id]/profile.ts]\r\n// Before: relative path hell\r\nimport { helper } from '../../../../utils/helper'\r\n\r\n// After: clean and predictable\r\nimport { helper } from '#server/utils/helper'\r\n```\r\n\r\nThe alias includes import protection – you can't accidentally import `#server` code from client or shared contexts.\r\n\r\n## 🪟 Draggable Error Overlay\r\n\r\nThe development error overlay introduced in Nuxt 4.2 is now draggable and can be minimized ([#33695](https://github.com/nuxt/nuxt/pull/33695)). You can:\r\n\r\n- Drag it to any corner of the screen (it snaps to edges)\r\n- Minimize it to a small pill button when you want to keep working\r\n- Your position and minimized state persist across page reloads\r\n\r\nThis is a quality-of-life improvement when you're iterating on fixes and don't want the overlay blocking your view.\r\n\r\nhttps://github.com/user-attachments/assets/nuxt_4-3_error_demo.mp4\r\n\r\n## ⚙️ Async Plugin Constructors\r\n\r\nModule authors can now use async functions when adding build plugins ([#33619](https://github.com/nuxt/nuxt/pull/33619)):\r\n\r\n```ts [modules/my-module.ts]\r\nexport default defineNuxtModule({\r\n async setup() {\r\n // Lazy load only when actually needed\r\n addVitePlugin(() => import('my-cool-plugin').then(r => r.default()))\r\n \r\n // No need to load webpack plugin if using Vite\r\n addWebpackPlugin(() => import('my-cool-plugin/webpack').then(r => r.default()))\r\n }\r\n})\r\n```\r\n\r\nThis enables true lazy loading of build plugins, avoiding unnecessary code loading when plugins aren't needed.\r\n\r\n## 🚀 Performance Improvements\r\n\r\nThis release includes several performance optimizations for faster builds:\r\n\r\n- **Hook filters** - Internal plugins now use filters to avoid running hooks unnecessarily ([#33898](https://github.com/nuxt/nuxt/pull/33898))\r\n- **SSR styles optimization** - The `nuxt:ssr-styles` plugin is now significantly faster ([#33862](https://github.com/nuxt/nuxt/pull/33862), [#33865](https://github.com/nuxt/nuxt/pull/33865))\r\n- **Layer alias transform** - Skipped when using Vite (it handles this natively) ([#33864](https://github.com/nuxt/nuxt/pull/33864))\r\n- **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](https://github.com/nuxt/nuxt/pull/33920))\r\n\r\n## 🎨 Inline Styles for Webpack/Rspack\r\n\r\nThe `inlineStyles` feature now works with webpack and rspack builders ([#33966](https://github.com/nuxt/nuxt/pull/33966)), not just Vite. This enables critical CSS inlining for better Core Web Vitals regardless of your bundler choice.\r\n\r\n## ⚠️ Deprecations\r\n\r\n### `statusCode` → `status`, `statusMessage` → `statusText`\r\n\r\nIn preparation for Nitro v3 and H3 v2, we're moving to use Web API naming conventions ([#33912](https://github.com/nuxt/nuxt/pull/33912)). The old properties still work but are deprecated in advance of v5:\r\n\r\n```diff\r\n- throw createError({ statusCode: 404, statusMessage: 'Not Found' })\r\n+ throw createError({ status: 404, statusText: 'Not Found' })\r\n```\r\n\r\n## 🐛 Bug Fixes\r\n\r\nNotable fixes in this release:\r\n\r\n- Fixed head component deduplication using `key` attribute ([#33958](https://github.com/nuxt/nuxt/pull/33958), [#33963](https://github.com/nuxt/nuxt/pull/33963))\r\n- Fixed async data properties not being reactive in Options API ([#34119](https://github.com/nuxt/nuxt/pull/34119))\r\n- Fixed `useCookie` unsafe number parsing during decode ([#34007](https://github.com/nuxt/nuxt/pull/34007))\r\n- Fixed `NuxtPage` not re-rendering when nested `NuxtLayout` has layouts disabled ([#34078](https://github.com/nuxt/nuxt/pull/34078))\r\n- Fixed client-side pathname decoding for non-ASCII route aliases ([#34043](https://github.com/nuxt/nuxt/pull/34043))\r\n- Fixed suspense remounting when navigating after pending state ([#33991](https://github.com/nuxt/nuxt/pull/33991))\r\n- Fixed clipboard copy in error overlay ([#33873](https://github.com/nuxt/nuxt/pull/33873))\r\n- Enabled `allowArbitraryExtensions` by default in TypeScript config ([#34084](https://github.com/nuxt/nuxt/pull/34084))\r\n- Added `noUncheckedIndexedAccess` to server tsconfig for safer typing ([#33985](https://github.com/nuxt/nuxt/pull/33985))\r\n\r\n> [!IMPORTANT]\r\n> Enabling `noUncheckedIndexedAccess` in the Nitro server TypeScript config improves type safety but may surface new type errors in your server code. This change was necessary because Nuxt's app context performs type checks on server routes ([learn more](https://nuxt.com/docs/4.x/guide/modules/recipes-advanced#known-limitations)). \r\n>\r\n> While we recommend keeping this enabled for better type safety, you can disable it if needed:\r\n>\r\n> ```ts\r\n> export default defineNuxtConfig({\r\n> nitro: {\r\n> typescript: {\r\n> tsConfig: {\r\n> compilerOptions: {\r\n> noUncheckedIndexedAccess: false\r\n> }\r\n> }\r\n> }\r\n> }\r\n> })\r\n> ```\r\n>\r\n> Note that disabling this may allow type errors to slip through that could cause runtime issues with indexed access.\r\n\r\n## 📚 Documentation\r\n\r\n- Improved module author guides with clearer structure ([#33803](https://github.com/nuxt/nuxt/pull/33803))\r\n- Added MCP setup instructions for Claude Desktop ([#33914](https://github.com/nuxt/nuxt/pull/33914))\r\n- Added layers directory documentation ([#33967](https://github.com/nuxt/nuxt/pull/33967))\r\n- Added Deno package manager examples ([#34070](https://github.com/nuxt/nuxt/pull/34070))\r\n- Clarified type-checking context limitations for server routes ([#33964](https://github.com/nuxt/nuxt/pull/33964))\r\n\r\n## 🎉 Nuxt 3.21.0\r\n\r\nAlongside v4.3.0, we're releasing **Nuxt v3.21.0** with many of the same improvements backported to the 3.x branch. This release includes:\r\n\r\n- **All the same features**: Route rule layouts, ISR payload extraction, layout props with `setPageLayout`, `#server` alias, draggable error overlay, and more\r\n- **All performance improvements**: SSR styles optimization, hook filters, and route rules compilation\r\n- **Module disabling**: Disable layer modules by setting options to `false`\r\n- **Critical bug fixes**: Async data reactivity in Options API, `useCookie` number parsing, head component deduplication, and more\r\n\r\n## ✅ Upgrading\r\n\r\nOur recommendation for upgrading is to run:\r\n\r\n```sh\r\nnpx nuxt@latest upgrade --dedupe --channel=v3\r\n```\r\n\r\nThis will deduplicate your lockfile and help ensure you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.\r\n\r\n> [!TIP]\r\n> Check out our [upgrade guide](https://nuxt.com/docs/getting-started/upgrade) if upgrading from an older version.\r\n\r\n\r\n## 👉 Changelog\r\n\r\n[compare changes](https://github.com/nuxt/nuxt/compare/v3.20.2...v3.21.0)\r\n### 🚀 Enhancements\r\n- **kit:** Support async constructor for adding plugins ([#33619](https://github.com/nuxt/nuxt/pull/33619))\r\n- **kit:** Export Nuxt major version type ([#33700](https://github.com/nuxt/nuxt/pull/33700))\r\n- **schema:** Add `#server` alias for server directory imports ([#33870](https://github.com/nuxt/nuxt/pull/33870))\r\n- **schema:** Hoist nitro `crossws` types ([6ff79ea6c](https://github.com/nuxt/nuxt/commit/6ff79ea6c))\r\n- **nitro,nuxt:** Compile route rules into client chunk ([#33920](https://github.com/nuxt/nuxt/pull/33920))\r\n- **nuxt:** Allow disabling modules by setting module options to `false` ([#33883](https://github.com/nuxt/nuxt/pull/33883))\r\n- **kit:** Allow specifying `moduleDependencies` as an async function ([#33504](https://github.com/nuxt/nuxt/pull/33504))\r\n- **nuxt:** Support `appLayout` in route rules ([#31092](https://github.com/nuxt/nuxt/pull/31092))\r\n- **nuxt:** Add route groups to page meta ([#33460](https://github.com/nuxt/nuxt/pull/33460))\r\n- **nuxt:** Enable payload extraction for ISR/SWR routes ([#33467](https://github.com/nuxt/nuxt/pull/33467))\r\n- **nuxt:** Allow updating props with `setPageLayout` ([#33805](https://github.com/nuxt/nuxt/pull/33805))\r\n- **nuxt:** Enable dragging and minimizing for error overlay ([#33695](https://github.com/nuxt/nuxt/pull/33695))\r\n- **nitro,nuxt:** Add support for payload extraction in dev ([#30784](https://github.com/nuxt/nuxt/pull/30784))\r\n- **rspack,webpack:** Add inline styles ([#33966](https://github.com/nuxt/nuxt/pull/33966))\r\n- **kit:** Add forward-compatible nitro types ([#34036](https://github.com/nuxt/nuxt/pull/34036))\r\n### 🔥 Performance\r\n- **nuxt:** Do not init layer alias transform when using vite ([#33864](https://github.com/nuxt/nuxt/pull/33864))\r\n- **vite:** Add hook filters for ssr styles plugin ([#33865](https://github.com/nuxt/nuxt/pull/33865))\r\n- **vite:** Optimize `nuxt:ssr-styles` plugin ([#33862](https://github.com/nuxt/nuxt/pull/33862))\r\n- **nuxt:** Use filter for vfs plugin load ([5bd8e81ed](https://github.com/nuxt/nuxt/commit/5bd8e81ed))\r\n- **nuxt,vite:** Use filters to avoid running hooks unnecessarily ([e762a1e20](https://github.com/nuxt/nuxt/commit/e762a1e20))\r\n- **nuxt,vite:** Add more filters to internal plugins ([#33898](https://github.com/nuxt/nuxt/pull/33898))\r\n### 🩹 Fixes\r\n- **kit:** Normalize local layer paths with trailing slashes ([#33858](https://github.com/nuxt/nuxt/pull/33858))\r\n- **nuxt:** Avoid overwriting multiple head input in island handler ([#33849](https://github.com/nuxt/nuxt/pull/33849))\r\n- **nuxt:** Update meta instead of calling `router.replace` in page hmr ([#33897](https://github.com/nuxt/nuxt/pull/33897))\r\n- **nuxt:** Don't call `page:loading:end` in cache if already called ([fbbe10133](https://github.com/nuxt/nuxt/commit/fbbe10133))\r\n- **vite:** Add error handling for parsing `NUXT_VITE_NODE_OPTIONS` ([8abb7ef5b](https://github.com/nuxt/nuxt/commit/8abb7ef5b))\r\n- **nuxt:** Do not skip middleware when `appMiddleware` references invalid key ([ed8bb68c5](https://github.com/nuxt/nuxt/commit/ed8bb68c5))\r\n- **nitro:** Clipboard copy in error overlay ([#33873](https://github.com/nuxt/nuxt/pull/33873))\r\n- **webpack,rspack:** Resolve deep imports in virtual files ([#33927](https://github.com/nuxt/nuxt/pull/33927))\r\n- **webpack:** Disable async chunks in dev mode ([c4bfd0a49](https://github.com/nuxt/nuxt/commit/c4bfd0a49))\r\n- **webpack:** Correctly evaluate sourcemap name ([93e3d92b9](https://github.com/nuxt/nuxt/commit/93e3d92b9))\r\n- **nuxt:** Handle node10 resolution for `nuxt/meta` ([b748840bc](https://github.com/nuxt/nuxt/commit/b748840bc))\r\n- **nuxt:** Do not early return if component priorities conflict ([#33955](https://github.com/nuxt/nuxt/pull/33955))\r\n- **nuxt:** Use `key` for tag deduplication in `` component ([#33958](https://github.com/nuxt/nuxt/pull/33958))\r\n- **schema,vite:** Resolve `build.transpile` when initialising vite ([#33868](https://github.com/nuxt/nuxt/pull/33868))\r\n- **nuxt,rspack,webpack:** Inject module identifiers for webpack builders ([#33962](https://github.com/nuxt/nuxt/pull/33962))\r\n- **nuxt:** Add key to head components for proper deduplication ([#33963](https://github.com/nuxt/nuxt/pull/33963))\r\n- **nitro:** Check prettyResponse.body type before error overlay ([#33977](https://github.com/nuxt/nuxt/pull/33977))\r\n- **nuxt:** Don't URI-encode static route paths ([#33990](https://github.com/nuxt/nuxt/pull/33990))\r\n- **nuxt:** Skip internal stub routes from prerender ([#34001](https://github.com/nuxt/nuxt/pull/34001))\r\n- **kit,schema:** Align module `onUpgrade` arguments with types ([#33988](https://github.com/nuxt/nuxt/pull/33988))\r\n- **nuxt:** Handle unsafe number parsing in useCookie decode ([#34007](https://github.com/nuxt/nuxt/pull/34007))\r\n- **nuxt:** Do not externalise `rou3` ([7da94e8c3](https://github.com/nuxt/nuxt/commit/7da94e8c3))\r\n- **nitro:** Add `noUncheckedIndexedAccess` to server tsconfig ([#33985](https://github.com/nuxt/nuxt/pull/33985))\r\n- **nuxt:** Update global reference to globalThis in `useRequestFetch` ([#33976](https://github.com/nuxt/nuxt/pull/33976))\r\n- **vite:** Configure hmr port for server build ([#33929](https://github.com/nuxt/nuxt/pull/33929))\r\n- **kit:** Add forward compatible nitro v3 types ([#34053](https://github.com/nuxt/nuxt/pull/34053))\r\n- **nitro,nuxt:** Do not import nitro deps in builders ([#34054](https://github.com/nuxt/nuxt/pull/34054))\r\n- **nitro:** Add `h3` types to auto-imports ([#34035](https://github.com/nuxt/nuxt/pull/34035))\r\n- **schema:** Add some more directories to ignore ([9cb9a19dd](https://github.com/nuxt/nuxt/commit/9cb9a19dd))\r\n- **nitro:** Also augment `nuxt/schema` ([9b40196a6](https://github.com/nuxt/nuxt/commit/9b40196a6))\r\n- **nuxt:** Make asyncData properties reactive in Options API ([#34119](https://github.com/nuxt/nuxt/pull/34119))\r\n- **nuxt:** Rerender `NuxtPage` when nested `NuxtLayout` has explicitly disabled layouts ([#34078](https://github.com/nuxt/nuxt/pull/34078))\r\n- **nuxt,schema:** Clean up types ([5ce351d0f](https://github.com/nuxt/nuxt/commit/5ce351d0f))\r\n- **nuxt:** Allow user augmentation of runtime config ([dd30410cb](https://github.com/nuxt/nuxt/commit/dd30410cb))\r\n- **kit,nitro:** Enable `allowArbitraryExtensions` by default ([#34084](https://github.com/nuxt/nuxt/pull/34084))\r\n- **nuxt:** Decode client-side pathname for non-ASCII route aliases ([#34043](https://github.com/nuxt/nuxt/pull/34043))\r\n- **nuxt:** Force remount suspense when navigating after pending ([#33991](https://github.com/nuxt/nuxt/pull/33991))\r\n- **nuxt:** Add documentation link to server builder error message ([#34122](https://github.com/nuxt/nuxt/pull/34122))\r\n- **nuxt:** Validate placeholder/fallback tags + warn about placeholder/fallback props ([f7912d3f3](https://github.com/nuxt/nuxt/commit/f7912d3f3))\r\n- **nuxt:** Force flush `useAsyncData` debounced execute post watcher flush ([#34125](https://github.com/nuxt/nuxt/pull/34125))\r\n- **nitro:** Process isr/swr/cache keys ([7f2bf4d13](https://github.com/nuxt/nuxt/commit/7f2bf4d13))\r\n- **nuxt:** Add `typeFrom` support for `imports.d.ts` template exports ([#34135](https://github.com/nuxt/nuxt/pull/34135))\r\n- **nuxt:** Ensure we inline styles for `hydrate-never` components ([#34132](https://github.com/nuxt/nuxt/pull/34132))\r\n### 💅 Refactors\r\n- **kit:** Add explicit return types for kit utilities ([ec2239cb4](https://github.com/nuxt/nuxt/commit/ec2239cb4))\r\n- **nitro,nuxt,schema,vite:** Provide explicit return types ([2564002de](https://github.com/nuxt/nuxt/commit/2564002de))\r\n- **kit,nuxt,schema:** Use named imports from `defu` + `consola` ([e31668f67](https://github.com/nuxt/nuxt/commit/e31668f67))\r\n- Add explicit `.ts` file extensions to relative imports ([458f3c9b6](https://github.com/nuxt/nuxt/commit/458f3c9b6))\r\n- **kit,nitro,nuxt,schema:** Reduce barrels + move `<>` to `as` ([08f72881e](https://github.com/nuxt/nuxt/commit/08f72881e))\r\n- **nitro,nuxt:** Use `~` prefix for internal ssrContext properties ([#33896](https://github.com/nuxt/nuxt/pull/33896))\r\n- **nitro:** Add explicit return types for runtime utils ([74bb6ddeb](https://github.com/nuxt/nuxt/commit/74bb6ddeb))\r\n- **nitro:** Move tree-shaken flags from replace plugin -> vfs ([#33907](https://github.com/nuxt/nuxt/pull/33907))\r\n- **nitro,nuxt,vite,webpack:** Use `status`/`statusText` + deprecate old props ([#33912](https://github.com/nuxt/nuxt/pull/33912))\r\n- **webpack:** Use RuntimeModule API for chunk preloads ([#33930](https://github.com/nuxt/nuxt/pull/33930))\r\n- **nuxt:** Use AST-aware function key injection ([#33446](https://github.com/nuxt/nuxt/pull/33446))\r\n- **nitro,nuxt,schema:** Use augments for nitro schema types ([#34039](https://github.com/nuxt/nuxt/pull/34039))\r\n- **nitro,rspack,vite,webpack:** Move cors handling -> nitro builder ([#34048](https://github.com/nuxt/nuxt/pull/34048))\r\n- **nitro:** Move to `nitropack/runtime` namespace ([b06d53166](https://github.com/nuxt/nuxt/commit/b06d53166))\r\n- **nitro,nuxt:** Move to `nitropack/runtime` namespace ([897a2259f](https://github.com/nuxt/nuxt/commit/897a2259f))\r\n### 📖 Documentation\r\n- Fix `useHead` return type ([#33857](https://github.com/nuxt/nuxt/pull/33857))\r\n- Add correct instructions to upgrade to latest Nuxt 3.x ([#33866](https://github.com/nuxt/nuxt/pull/33866))\r\n- Improve grammar ([#34093](https://github.com/nuxt/nuxt/pull/34093))\r\n- Use h2 for nuxt add command page ([a0a1763d5](https://github.com/nuxt/nuxt/commit/a0a1763d5))\r\n- Update links to module guide ([c9c1282f8](https://github.com/nuxt/nuxt/commit/c9c1282f8))\r\n- Split and improve `Module Author Guides` ([#33803](https://github.com/nuxt/nuxt/pull/33803))\r\n- Split directory structure and re-order guides (v4) ([#33691](https://github.com/nuxt/nuxt/pull/33691))\r\n- Add mcp server and llms.txt ([#33371](https://github.com/nuxt/nuxt/pull/33371))\r\n- Add note that middleware doesn't run when rendering islands ([d22cf7903](https://github.com/nuxt/nuxt/commit/d22cf7903))\r\n- Add note on default branch for layers ([#33919](https://github.com/nuxt/nuxt/pull/33919))\r\n- Add mcp setup instructions for claude desktop ([#33914](https://github.com/nuxt/nuxt/pull/33914))\r\n- Mention deno as package manager ([#33875](https://github.com/nuxt/nuxt/pull/33875))\r\n- Clarify purpose of `statusText` ([#32834](https://github.com/nuxt/nuxt/pull/32834))\r\n- Update lychee config and remove medium article link ([36c19ce73](https://github.com/nuxt/nuxt/commit/36c19ce73))\r\n- Update module count and fix typo ([#33950](https://github.com/nuxt/nuxt/pull/33950))\r\n- Add DeepWiki badge ([#33508](https://github.com/nuxt/nuxt/pull/33508))\r\n- Give example of usage of `defineWrappedResponseHandler` ([#33952](https://github.com/nuxt/nuxt/pull/33952))\r\n- Provide cleaner example code for vitest projects ([#33960](https://github.com/nuxt/nuxt/pull/33960))\r\n- Update yarn create command ([b30432979](https://github.com/nuxt/nuxt/commit/b30432979))\r\n- Update roadmap with a11y ([7ea35137c](https://github.com/nuxt/nuxt/commit/7ea35137c))\r\n- Add a11y release ([#34041](https://github.com/nuxt/nuxt/pull/34041))\r\n- Remove Nuxtr from recommendations ([#34045](https://github.com/nuxt/nuxt/pull/34045))\r\n- Remove duplicate feature ([#34058](https://github.com/nuxt/nuxt/pull/34058))\r\n- Provide deno package manager examples ([#34070](https://github.com/nuxt/nuxt/pull/34070))\r\n- Make custom wrapper recipe link more prominent ([#34085](https://github.com/nuxt/nuxt/pull/34085))\r\n- **nuxt:** Mention custom serializers in `useState` docs ([#34105](https://github.com/nuxt/nuxt/pull/34105))\r\n- Clarify module setups in `.nuxtrc` example ([#34107](https://github.com/nuxt/nuxt/pull/34107))\r\n- Add layers directory documentation ([#33967](https://github.com/nuxt/nuxt/pull/33967))\r\n- Add a tip for `appLayout` ([9b78698c3](https://github.com/nuxt/nuxt/commit/9b78698c3))\r\n- Add docs for disabling modules by passing `false` to its options ([18500730c](https://github.com/nuxt/nuxt/commit/18500730c))\r\n- Add info about caching payloads with isr/swr ([4b055548e](https://github.com/nuxt/nuxt/commit/4b055548e))\r\n- Add example for async addVitePlugin ([4407f6862](https://github.com/nuxt/nuxt/commit/4407f6862))\r\n- Add example of passing props to layouts ([401aa90ab](https://github.com/nuxt/nuxt/commit/401aa90ab))\r\n- Mark vite plugin as not typed ([25eae7699](https://github.com/nuxt/nuxt/commit/25eae7699))\r\n- Add warning about `source` from `` ([08778c98c](https://github.com/nuxt/nuxt/commit/08778c98c))\r\n- Sync with main branch ([e8c04aaa6](https://github.com/nuxt/nuxt/commit/e8c04aaa6))\r\n- Fix ai guide link ([01c173b78](https://github.com/nuxt/nuxt/commit/01c173b78))\r\n### 📦 Build\r\n- Remove babel debugging plugin from jiti stub options ([1ec010681](https://github.com/nuxt/nuxt/commit/1ec010681))\r\n- **vite:** Add build entries for `vite-node` entrypoints ([#33893](https://github.com/nuxt/nuxt/pull/33893))\r\n- **nuxt:** Tidy up subpath export types ([fe92e9c17](https://github.com/nuxt/nuxt/commit/fe92e9c17))\r\n- Use `obuild` except for nuxt + nitro-server packages ([#34049](https://github.com/nuxt/nuxt/pull/34049))\r\n- **schema:** Fix `/builder-env` subpath types ([1951648fa](https://github.com/nuxt/nuxt/commit/1951648fa))\r\n### 🏡 Chore\r\n- Add return types to debug plugins ([1d4f9a3ae](https://github.com/nuxt/nuxt/commit/1d4f9a3ae))\r\n- Add `build:stub` command for those that need it ([c682b2681](https://github.com/nuxt/nuxt/commit/c682b2681))\r\n- Revert change to how type augments are inserted ([6a238b576](https://github.com/nuxt/nuxt/commit/6a238b576))\r\n- Do not require aligned columns in tables ([d8a90b3d5](https://github.com/nuxt/nuxt/commit/d8a90b3d5))\r\n- Update eslint config rule ([d87ed519a](https://github.com/nuxt/nuxt/commit/d87ed519a))\r\n- Explicitly import `node:process` ([#33982](https://github.com/nuxt/nuxt/pull/33982))\r\n- Add root scripts to lint context ([ee83838b4](https://github.com/nuxt/nuxt/commit/ee83838b4))\r\n- Tidy up configs ([ab131b464](https://github.com/nuxt/nuxt/commit/ab131b464))\r\n- Add `.nuxtrc` with test-utils setup ([b5879351f](https://github.com/nuxt/nuxt/commit/b5879351f))\r\n- Add eslint ignore ([87811234d](https://github.com/nuxt/nuxt/commit/87811234d))\r\n- Upgrade `vite-node` separately from `vitest` ([8114e886f](https://github.com/nuxt/nuxt/commit/8114e886f))\r\n- Lint docs with eslint ([d2d5f6733](https://github.com/nuxt/nuxt/commit/d2d5f6733))\r\n- Lint ([b9df0e847](https://github.com/nuxt/nuxt/commit/b9df0e847))\r\n- Lint ([0efcf01fa](https://github.com/nuxt/nuxt/commit/0efcf01fa))\r\n### ✅ Tests\r\n- Update tests for new version of nuxt/test-utils ([#33842](https://github.com/nuxt/nuxt/pull/33842))\r\n- Avoid unnecessary tick ([fb4720840](https://github.com/nuxt/nuxt/commit/fb4720840))\r\n- Add regression test for asyncData HMR ([#32182](https://github.com/nuxt/nuxt/pull/32182))\r\n- Add test for page hmr resetting state ([#32418](https://github.com/nuxt/nuxt/pull/32418))\r\n- Add reproduction for vite pre-transform error ([#31574](https://github.com/nuxt/nuxt/pull/31574))\r\n- Add regression test for #32154 ([#32154](https://github.com/nuxt/nuxt/issues/32154))\r\n- Use `vi.hoisted` for klona mock ([#34113](https://github.com/nuxt/nuxt/pull/34113))\r\n- Update bundle size ([e6c8d10c6](https://github.com/nuxt/nuxt/commit/e6c8d10c6))\r\n- Fix paths in hmr test ([3b8b2138a](https://github.com/nuxt/nuxt/commit/3b8b2138a))\r\n- Update snapshots ([51c83b8ec](https://github.com/nuxt/nuxt/commit/51c83b8ec))\r\n- Update bundle size ([22708c05c](https://github.com/nuxt/nuxt/commit/22708c05c))\r\n### 🤖 CI\r\n- Directly call webhook url ([4eedbcae5](https://github.com/nuxt/nuxt/commit/4eedbcae5))\r\n- Use new reusable triage workflows ([#34072](https://github.com/nuxt/nuxt/pull/34072))\r\n- Use new shared dependency review workflow ([9e6770f18](https://github.com/nuxt/nuxt/commit/9e6770f18))\r\n\r\n### ❤️ Contributors\r\n- Daniel Roe (@danielroe)\r\n- Florian Heuberger (@Flo0806)\r\n- Octavio Araiza (@8ctavio)\r\n- Robin (@OrbisK)\r\n- shaheer-arbisoft (@shaheer-arbisoft)\r\n- Francesco Mussoni (@solidusite)\r\n- Danila Poyarkov (@dannote)\r\n- Teages (@Teages)\r\n- Anthony Fu (@antfu)\r\n- Eli Sterken (@eli-sterk)\r\n- Ryota Watanabe (@wattanx)\r\n- edison (@edison1105)\r\n- Max (@onmax)\r\n- Rahul Dogra (@rahuld109)\r\n- abeer0 (@iiio2)\r\n- Philipp Wagner (@imphil)\r\n- Maxime Pauvert (@maximepvrt)\r\n- Wind (@productdevbook)\r\n- Agatem (@agatemosu)\r\n- Pavel (@eL1fe)\r\n- Lucie (@lihbr)\r\n- Sergiu Ravliuc (@YoSoySergio)\r\n- Julien Huang (@huang-julien)\r\n- Saeid Zareie (@Saeid-Za)\r\n- Alireza Jahandideh (@Youhan)\r\n- kikuchan (@kikuchan)\r\n- Ragura (@Ragura)\r\n- Josh Deltener (@hecktarzuli)\r\n- Teena (@franklin-tina)\r\n- Matej Černý (@cernymatej)\r\n- Frederik Bußmann (@freb97)\r\n- Benjamin Oddou (@BenjaminOddou)\r\n- Mukund Shah (@mukundshah)\r\n- Jessé Correia Lins (@linspw)\r\n- Jannik Sohn (@janniksohn)\r\n- Dawit (@oneminch)\r\n- Ali Sokkar (@NyllRE)\r\n- Horu (@HigherOrderLogic)\r\n- Hugo (@HugoRCD)\r\n- Sébastien Chopin (@atinux)\r\n- David Stack (@davidstackio)\r\n- Ruslan Stelmachenko (@xak2000)\r\n- Harlan Wilton (@harlan-zw)\r\n- Alexander Lichter (@TheAlexLichter)\r\n- Ryan Wilson (@rywils)\r\n- yamachi4416 (@yamachi4416)","url":"https://announcehq.com/nuxt/ea3d8d99-4138-4e01-9bdf-7b80114675a1","datePublished":"2026-01-22T23:10:44.000Z","dateModified":"2026-01-22T23:10:44.000Z","author":{"@type":"Organization","name":"nuxt","url":"https://github.com/nuxt/nuxt"},"publisher":{"@type":"Organization","name":"AnnounceHQ","url":"https://announcehq.com","logo":{"@type":"ImageObject","url":"https://announcehq.com/logo.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://announcehq.com/nuxt/ea3d8d99-4138-4e01-9bdf-7b80114675a1"},"isPartOf":{"@type":"WebPage","@id":"https://announcehq.com/nuxt","name":"nuxt Changelog"},"about":{"@type":"SoftwareApplication","name":"nuxt"},"keywords":"nuxt, release notes, changelog, new, software update"}

Back to changelog

NewJanuary 22, 2026

v3.21.0

3.21.0 is the next minor release.

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

📣 Some News

Extended v3 Support

Early this month, I opened a discussion to find out how the upgrade had gone from v3 to v4. I was really pleased to hear how well it had gone for most people.

Having said that, we're committed to making sure no one gets left behind. And so we will continue to provide security updates and critical bug fix releases beyond the previously announced end-of-life date of January 31, 2026, meaning Nuxt v3 will meet its end-of-life on July 31, 2026.

[!TIP] As usual, today also brings a minor release for v3, with many of the same improvements backported from v4.3.

Preparing for Nuxt 5

We're closer than ever to the releases of Nuxt v5 and Nitro v3. In the coming weeks, the branch of the Nuxt repository will begin receiving initial commits for Nuxt 5. However, it's still .

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

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

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

<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')
  }
})

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

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

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

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

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()))
  }
})

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

npx nuxt@latest upgrade --dedupe --channel=v3