Skip to content

Commit 018cf59

Browse files
danielroedanielroe
authored
feat: add release blog for 4.3 (#2167)
1 parent d494a87 commit 018cf59

File tree

2 files changed

+307
-0
lines changed

2 files changed

+307
-0
lines changed

‎content/blog/42.v4-3.md‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
---
2+
title: Nuxt 4.3
3+
description: Nuxt 4.3 is out – route rule layouts, ISR payload extraction, draggable error overlay, and more!
4+
navigation: false
5+
image: /assets/blog/v4.3.png
6+
authors:
7+
- name: Daniel Roe
8+
avatar:
9+
src: https://github.com/danielroe.png
10+
to: https://bsky.app/profile/danielroe.dev
11+
date: 2026-01-22
12+
category: Release
13+
---
14+
15+
Nuxt 4.3 brings powerful new features for layouts, caching, and developer experience – plus significant performance improvements under the hood.
16+
17+
## 📣 Some News
18+
19+
### Extended v3 Support
20+
21+
Early this month, I [opened a discussion](https://github.com/nuxt/nuxt/discussions/33918) 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.
22+
23+
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.
24+
25+
::tip
26+
As usual, today also brings a minor release for v3, with many of the same improvements backported from v4.3.
27+
::
28+
29+
### Preparing for Nuxt 5
30+
31+
We're closer than ever to the releases of Nuxt v5 and Nitro v3. In the coming weeks, the `main` branch of the Nuxt repository will begin receiving initial commits for Nuxt 5. However, it's still **business as usual**.
32+
33+
- Continue making pull requests to the `main` branch
34+
- We'll backport changes to the `4.x` and `3.x` branches
35+
36+
Keep an eye out on the [Upgrade Guide](/docs/4.x/getting-started/upgrade) – we'll be adding details about how you can already start migrating your projects to prepare for Nuxt v4 with `future.compatibilityVersion: 5`.
37+
38+
## 🗂️ Route Rule Layouts
39+
40+
But that's enough about the future. We have a lot of good things for you today!
41+
42+
First, you can now set layouts directly in route rules using the new `appLayout` property ([#31092](https://github.com/nuxt/nuxt/pull/31092)). This provides a centralized, declarative way to manage layouts across your application without scattering `definePageMeta` calls throughout your pages.
43+
44+
```ts [nuxt.config.ts]
45+
export default defineNuxtConfig({
46+
routeRules: {
47+
'/admin/**': { appLayout: 'admin' },
48+
'/dashboard/**': { appLayout: 'dashboard' },
49+
'/auth/**': { appLayout: 'minimal' }
50+
}
51+
})
52+
```
53+
54+
This might be useful for:
55+
56+
- Admin panels with a shared layout across many routes
57+
- Marketing pages that need a different layout from the app
58+
59+
::tip
60+
Plus, you can pass props to layouts now! See [the `setPageLayout` improvements below](#layout-props-with-setpagelayout).
61+
::
62+
63+
## 📦 ISR/SWR Payload Extraction
64+
65+
Payload extraction now works with ISR (incremental static regeneration), SWR (stale-while-revalidate) and cache `routeRules` ([#33467](https://github.com/nuxt/nuxt/pull/33467)). Previously, only pre-rendered pages could generate `_payload.json` files.
66+
67+
This means:
68+
- Client-side navigation to ISR/SWR pages can use cached payloads
69+
- CDNs (Vercel, Netlify, Cloudflare) can cache payload files alongside HTML
70+
- Fewer API calls during navigation – data can be prefetched and served from the cached payload
71+
72+
```ts [nuxt.config.ts]
73+
export default defineNuxtConfig({
74+
routeRules: {
75+
'/products/**': {
76+
isr: 3600, // Revalidate every hour
77+
}
78+
}
79+
})
80+
```
81+
82+
## 🧹 Dev Mode Payload Extraction
83+
84+
Related to the above, payload extraction now also works in development mode ([#30784](https://github.com/nuxt/nuxt/pull/30784)). This makes it easier to test and debug payload behavior without needing to run a production build.
85+
86+
::important
87+
Payload extraction works in dev mode with `nitro.static` set to `true`, or for individual pages which have `isr`, `swr`, `prerender` or `cache` route rules.
88+
::
89+
90+
## 🚫 Disable Modules from Layers
91+
92+
When extending Nuxt layers, you can now disable specific modules that you don't need ([#33883](https://github.com/nuxt/nuxt/pull/33883)). Just pass `false` to the module's options:
93+
94+
```ts [nuxt.config.ts]
95+
export default defineNuxtConfig({
96+
extends: ['../shared-layer'],
97+
// disable @nuxt/image from layer
98+
image: false,
99+
})
100+
```
101+
102+
## 🏷️ Route Groups in Page Meta
103+
104+
[Route groups](/docs/4.x/directory-structure/app/pages#route-groups) (folders wrapped in parentheses like `(protected)/`) are now exposed in page meta ([#33460](https://github.com/nuxt/nuxt/pull/33460)). This makes it easy to check which groups a route belongs to in middleware or anywhere you have access to the route.
105+
106+
```vue [pages/(protected)/dashboard.vue]
107+
<script setup lang="ts">
108+
// This page's meta will include: { groups: ['protected'] }
109+
useRoute().meta.groups
110+
</script>
111+
```
112+
113+
```ts [middleware/auth.ts]
114+
export default defineNuxtRouteMiddleware((to) => {
115+
if (to.meta.groups?.includes('protected') && !isAuthenticated()) {
116+
return navigateTo('/login')
117+
}
118+
})
119+
```
120+
121+
This provides a clean, convention-based approach to route-level authorization without needing to add `definePageMeta` to every protected page.
122+
123+
## 🎨 Layout Props with `setPageLayout`
124+
125+
The `setPageLayout` composable now accepts a second parameter to pass props to your layout ([#33805](https://github.com/nuxt/nuxt/pull/33805)):
126+
127+
```ts [middleware/admin.ts]
128+
export default defineNuxtRouteMiddleware((to) => {
129+
setPageLayout('admin', {
130+
sidebar: true,
131+
theme: 'dark'
132+
})
133+
})
134+
```
135+
136+
```vue [layouts/admin.vue]
137+
<script setup lang="ts">
138+
defineProps<{
139+
sidebar?: boolean
140+
theme?: 'light' | 'dark'
141+
}>()
142+
</script>
143+
```
144+
145+
## 🔧 `#server` Alias
146+
147+
A new `#server` alias provides clean imports within your server directory ([#33870](https://github.com/nuxt/nuxt/pull/33870)), similar to how `#shared` works:
148+
149+
```ts [server/api/users/[id]/profile.ts]
150+
// Before: relative path hell
151+
import { helper } from '../../../../utils/helper'
152+
153+
// After: clean and predictable
154+
import { helper } from '#server/utils/helper'
155+
```
156+
157+
The alias includes import protection &ndash; you can't accidentally import `#server` code from client or shared contexts.
158+
159+
## 🪟 Draggable Error Overlay
160+
161+
The 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:
162+
163+
- Drag it to any corner of the screen (it snaps to edges)
164+
- Minimize it to a small pill button when you want to keep working
165+
- Your position and minimized state persist across page reloads
166+
167+
This is a quality-of-life improvement when you're iterating on fixes and don't want the overlay blocking your view.
168+
169+
::video{poster="https://res.cloudinary.com/dchoja2nb/video/upload/v1769103044/nuxt_4-3_error_caqkhk.jpg" controls class="rounded dark:border dark:border-gray-700"}
170+
:source{src="https://res.cloudinary.com/dchoja2nb/video/upload/v1769103044/nuxt_4-3_error_caqkhk.webm" type="video/webm"}
171+
:source{src="https://res.cloudinary.com/dchoja2nb/video/upload/v1769103044/nuxt_4-3_error_caqkhk.mp4" type="video/mp4"}
172+
:source{src="https://res.cloudinary.com/dchoja2nb/video/upload/v1769103044/nuxt_4-3_error_caqkhk.ogg" type="video/ogg"}
173+
::
174+
175+
## ⚙️ Async Plugin Constructors
176+
177+
Module authors can now use async functions when adding build plugins ([#33619](https://github.com/nuxt/nuxt/pull/33619)):
178+
179+
```ts [modules/my-module.ts]
180+
export default defineNuxtModule({
181+
async setup() {
182+
// Lazy load only when actually needed
183+
addVitePlugin(() => import('my-cool-plugin').then(r => r.default()))
184+
185+
// No need to load webpack plugin if using Vite
186+
addWebpackPlugin(() => import('my-cool-plugin/webpack').then(r => r.default()))
187+
}
188+
})
189+
```
190+
191+
This enables true lazy loading of build plugins, avoiding unnecessary code loading when plugins aren't needed.
192+
193+
## 🚀 Performance Improvements
194+
195+
This release includes several performance optimizations for faster builds:
196+
197+
- **Hook filters** - Internal plugins now use filters to avoid running hooks unnecessarily ([#33898](https://github.com/nuxt/nuxt/pull/33898))
198+
- **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))
199+
- **Layer alias transform** - Skipped when using Vite (it handles this natively) ([#33864](https://github.com/nuxt/nuxt/pull/33864))
200+
- **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))
201+
202+
## 🎨 Inline Styles for Webpack/Rspack
203+
204+
The `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.
205+
206+
## ⚠️ Deprecations
207+
208+
### `statusCode` → `status`, `statusMessage` → `statusText`
209+
210+
In 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:
211+
212+
```diff
213+
- throw createError({ statusCode: 404, statusMessage: 'Not Found' })
214+
+ throw createError({ status: 404, statusText: 'Not Found' })
215+
```
216+
217+
## 🐛 Bug Fixes
218+
219+
Notable fixes in this release:
220+
221+
- Fixed head component deduplication using `key` attribute ([#33958](https://github.com/nuxt/nuxt/pull/33958), [#33963](https://github.com/nuxt/nuxt/pull/33963))
222+
- Fixed async data properties not being reactive in Options API ([#34119](https://github.com/nuxt/nuxt/pull/34119))
223+
- Fixed `useCookie` unsafe number parsing during decode ([#34007](https://github.com/nuxt/nuxt/pull/34007))
224+
- Fixed `NuxtPage` not re-rendering when nested `NuxtLayout` has layouts disabled ([#34078](https://github.com/nuxt/nuxt/pull/34078))
225+
- Fixed client-side pathname decoding for non-ASCII route aliases ([#34043](https://github.com/nuxt/nuxt/pull/34043))
226+
- Fixed suspense remounting when navigating after pending state ([#33991](https://github.com/nuxt/nuxt/pull/33991))
227+
- Fixed clipboard copy in error overlay ([#33873](https://github.com/nuxt/nuxt/pull/33873))
228+
- Enabled `allowArbitraryExtensions` by default in TypeScript config ([#34084](https://github.com/nuxt/nuxt/pull/34084))
229+
- Added `noUncheckedIndexedAccess` to server tsconfig for safer typing ([#33985](https://github.com/nuxt/nuxt/pull/33985))
230+
231+
::important
232+
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)).
233+
234+
While we recommend keeping this enabled for better type safety, you can disable it if needed:
235+
236+
```ts [nuxt.config.ts]
237+
export default defineNuxtConfig({
238+
nitro: {
239+
typescript: {
240+
tsConfig: {
241+
compilerOptions: {
242+
noUncheckedIndexedAccess: false
243+
}
244+
}
245+
}
246+
}
247+
})
248+
```
249+
250+
Note that disabling this may allow type errors to slip through that could cause runtime issues with indexed access.
251+
::
252+
253+
## 📚 Documentation
254+
255+
- Improved module author guides with clearer structure ([#33803](https://github.com/nuxt/nuxt/pull/33803))
256+
- Added MCP setup instructions for Claude Desktop ([#33914](https://github.com/nuxt/nuxt/pull/33914))
257+
- Added layers directory documentation ([#33967](https://github.com/nuxt/nuxt/pull/33967))
258+
- Added Deno package manager examples ([#34070](https://github.com/nuxt/nuxt/pull/34070))
259+
- Clarified type-checking context limitations for server routes ([#33964](https://github.com/nuxt/nuxt/pull/33964))
260+
261+
## 🎉 Nuxt 3.21.0
262+
263+
Alongside 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:
264+
265+
- **All the same features**: Route rule layouts, ISR payload extraction, layout props with `setPageLayout`, `#server` alias, draggable error overlay, and more
266+
- **All performance improvements**: SSR styles optimization, hook filters, and route rules compilation
267+
- **Module disabling**: Disable layer modules by setting options to `false`
268+
- **Critical bug fixes**: Async data reactivity in Options API, `useCookie` number parsing, head component deduplication, and more
269+
270+
## ✅ Upgrading
271+
272+
Our recommendation for upgrading is to run:
273+
274+
```sh
275+
npx nuxt upgrade --dedupe
276+
277+
# or, if you are upgrading to v3.21
278+
npx nuxt@latest upgrade --dedupe --channel=v3
279+
```
280+
281+
This will deduplicate your lockfile and help ensure you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
282+
283+
::tip
284+
Check out our [upgrade guide](/docs/getting-started/upgrade) if upgrading from an older version.
285+
::
286+
287+
## 👉 Full Release Notes
288+
289+
::read-more
290+
---
291+
icon: i-simple-icons-github
292+
target: _blank
293+
to: https://github.com/nuxt/nuxt/releases/tag/v4.3.0
294+
---
295+
Read the full release notes of Nuxt `v4.3.0`.
296+
::
297+
298+
::read-more
299+
---
300+
icon: i-simple-icons-github
301+
target: _blank
302+
to: https://github.com/nuxt/nuxt/releases/tag/v3.21.0
303+
---
304+
Read the full release notes of Nuxt `v3.21.0`.
305+
::
306+
307+
Thank you to all of the many contributors to this release! 💚

‎public/assets/blog/v4.3.png‎

495 KB
Loading

0 commit comments

Comments
 (0)