🐞 Bug Fixes
- Resolve import paths as absolute - by @harlan-zw (a2173)
🏎 Performance
- googleMaps: Avoid multiple rerenders when adding markers to clusterer - by @DamianGlowala in https://github.com/nuxt/scripts/issues/517 (1f5e1)
This release includes the merge of several new available scripts:
Thank you to all contributors. An extra special shout out to @OrbisK, @dennisadriaans, @DamianGlowala, @vachmara & @gelanderosh for their contributions in this release.
⚠️ Please test when upgrading, as there is breaking changes included.
watch
mode - by @harlan-zw in https://github.com/nuxt/scripts/issues/514 (31798)scriptInput.src
- by @harlan-zw in https://github.com/nuxt/scripts/issues/500 (abe57)#imports
usage - by @harlan-zw (67b7e)performanceMarkFeature
emits - by @harlan-zw (c079f)onBeforeGtmStart
arguments - by @endorfin and @harlan-zw in https://github.com/nuxt/scripts/issues/494 (1edcd)status-position
when 0 (#4994) (e0891ea)icons
type (#4991) (526cb81)Full Changelog: https://github.com/nuxt/ui/compare/v3.3.4...v3.3.5
We are excited to announce Nuxt UI v4, a major milestone that unifies Nuxt UI and Nuxt UI Pro into a single, fully open-source library. Following NuxtLabs joining Vercel in July, we're now able to offer 100+ production-ready components and a complete Figma Kit available for free to everyone.
Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v4
Nuxt UI v4 marks a significant milestone by merging Nuxt UI and Nuxt UI Pro into one cohesive, fully open-source library:
@nuxt/ui
All our previously exclusive templates for Nuxt and Vue are now available to everyone and updated to Nuxt UI v4:
We've made extensive improvements to the documentation in v4 to provide a better developer experience:
/docs/
with automatic redirects from legacy pathsThe migration from v3 to v4 is designed to be smoother than previous major version transitions. We recommend reading the migration guide for step-by-step instructions.
For Nuxt UI users
@nuxt/ui@latest
For Nuxt UI Pro users
@nuxt/ui-pro
with @nuxt/ui
in your dependencies@nuxt/ui-pro
to @nuxt/ui
in your Nuxt configuiPro
to ui
in your app config@nuxt/ui-pro
to @nuxt/ui
@nuxt/ui
We want to extend a special thanks to everyone who supported Nuxt UI Pro. Your early adoption and feedback were instrumental in shaping Nuxt UI. You helped us fund, maintain, and improve the project, allowing us to reach this milestone where we can now offer these powerful tools to the entire community.
A huge thanks to the dedicated team behind Nuxt UI and our incredible community of 250+ contributors. Your hard work, creativity, and passion have been the driving force behind this project's success.
Thank you for being part of this journey 💚
joi
and yup
in favor of @standard-schema/spec (#5035) (723cf36)pt
locale (#5003) (725ef9b)w-full
by default (#4997) (de47add)value-key
in favor of get-key
(#4999) (240ff42)Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.2...v4.0.0-beta.0
textContent
instead of innerHtml
for auth pagechore: update lock - by @antfu (7cadb)This 4.0.0-alpha.2
release focused mostly on stability and documentation.
The official v4 release should come next week after some more testing.
We've made significant improvements to the documentation in this release.
Read the migration guide about this change: https://ui4.nuxt.com/docs/getting-started/migration/v4#changes-to-form-component
actions
slot renders (#4946) (5d6e1fc)labelKey
and valueKey
(#4933) (11a0320)button
type (f33e43c), closes #4935clear
function (#4843) (2269b48)id
name (#4890) (1b5d741)status-position
when 0 (#4994) (0e1e44c)icons
type (#4991) (6ddf899)Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.1...v4.0.0-alpha.2
button
type (91f86d9), closes #4935clear
function (#4843) (0a8ead7)id
name (#4890) (e5cb55b)Full Changelog: https://github.com/nuxt/ui/compare/v3.3.3...v3.3.4
4.1.2 is a regularly scheduled patch release.
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
dst
is present (#33200)hydrate-when
lazy hydration strategy (#33199)pkg-types
to dependencies (9fe2541ca)backgroundSize
in loading indicator (#33211)enabled
from components dir options (#32844)app/
suffix to a few links (#33217)3.19.2 is a regularly scheduled patch release.
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
dst
is present (#33200)hydrate-when
lazy hydration strategy (#33199)pkg-types
to dependencies (a6e5dd756)backgroundSize
in loading indicator (#33211)enabled
from components dir options (#32844)!NOTE The
z
re-export from@nuxt/content
is deprecated and will be removed in a future release. Importz
fromzod
(orzod/v3
) instead.
.DS_Store
(fe5d7f91)close
hook if websocket is disabled (#3474)ProseCode
preview syntax highlighting (#3491)nitro
export in favor of server
(ec97064f)publicUrl
if available (#3500)<slot>
(#3460)sqliteConnector
(f97ea701)kbd
for keyboard shortcuts (9979388d)@nuxtjs/i18n
(81bf914c)v4.1.1 is a regularly scheduled patch release
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
globalThis
over window
(#33125)deps.inline
(#33133)useRoute
usage warning (#33039)imports:sources
in override warning (#33050)--
to bun create command (5e661f0ca)app/
prefix in lots of cases (#33117)navigateTo
(#21442)4x
tags from releases (1cd8a6857)v3.19.1 is a regularly scheduled patch release
Our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
globalThis
over window
(#33125)deps.inline
(#33133)useRoute
usage warning (#33039)imports:sources
in override warning (#33050)--
to bun create command (ab6aa8ee5)navigateTo
(#21442)4x
tags from releases (e3aa50d11)Build stability has been significantly improved with import maps (#33075). This prevents cascading hash changes that could invalidate large portions of your build when small changes are made:
<!-- Automatically injected import map -->
<script type="importmap">{"imports":{"#entry":"/_nuxt/DC5HVSK5.js"}}</script>
By default, JS chunks emitted in a Vite build are hashed, which means they can be cached immutably. However, this can cause a significant issue: a change to a single component can cause every hash to be invalidated, massively increasing the chance of 404s.
In short:
Obviously this wasn't optimal. With this new feature, the hash of (otherwise) unchanged files which import the entry won't be affected.
This feature is automatically enabled and helps maintain better cache efficiency in production. It does require native import map support, but Nuxt will automatically disable it if you have configured vite.build.target
to include a browser that doesn't support import maps.
And of course you can disable it if needed:
export default defineNuxtConfig({
experimental: {
entryImportMap: false
}
})
Nuxt now includes experimental support for rolldown-vite
(#31812), bringing Rust-powered bundling for potentially faster builds.
To try Rolldown in your Nuxt project, you need to override Vite with the rolldown-powered version since Vite is a dependency of Nuxt. Add the following to your package.json
:
npm:
{
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
pnpm:
{
"pnpm": {
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
}
yarn:
{
"resolutions": {
"vite": "npm:rolldown-vite@latest"
}
}
bun:
{
"overrides": {
"vite": "npm:rolldown-vite@latest"
}
}
After adding the override, reinstall your dependencies. Nuxt will automatically detect when Rolldown is available and adjust its build configuration accordingly.
For more details on Rolldown integration, see the Vite Rolldown guide.
!NOTE This is experimental and may have some limitations, but offers a glimpse into the future of high-performance bundling in Nuxt.
Lazy hydration macros now work without auto-imports (#33037), making them more reliable when component auto-discovery is disabled:
<script setup>
// Works even with components: false
const LazyComponent = defineLazyHydrationComponent(
'visible',
() => import('./MyComponent.vue')
)
</script>
This ensures that components that are not "discovered" through Nuxt (e.g., because components
is set to false
in the config) can still be used in lazy hydration macros.
If you have enabled experimental extraction of route rules, these are now exposed on a dedicated rules
property on NuxtPage
objects (#32897), making them more accessible to modules and improving the overall architecture:
// In your module
nuxt.hook('pages:extend', pages => {
pages.push({
path: '/api-docs',
rules: {
prerender: true,
cors: true,
headers: { 'Cache-Control': 's-maxage=31536000' }
}
})
})
The defineRouteRules
function continues to work exactly as before, but now provides better integration possibilities for modules.
Modules can now specify dependencies and modify options for other modules (#33063). This enables better module integration and ensures proper setup order:
export default defineNuxtModule({
meta: {
name: 'my-module',
},
moduleDependencies: {
'some-module': {
// You can specify a version constraint for the module
version: '>=2',
// By default moduleDependencies will be added to the list of modules
// to be installed by Nuxt unless `optional` is set.
optional: true,
// Any configuration that should override `nuxt.options`.
overrides: {},
// Any configuration that should be set. It will override module defaults but
// will not override any configuration set in `nuxt.options`.
defaults: {}
}
},
setup (options, nuxt) {
// Your module setup logic
}
})
This replaces the deprecated installModule
function and provides a more robust way to handle module dependencies with version constraints and configuration merging.
Module authors now have access to two new lifecycle hooks: onInstall
and onUpgrade
(#32397). These hooks allow modules to perform additional setup steps when first installed or when upgraded to a new version:
export default defineNuxtModule({
meta: {
name: 'my-module',
version: '1.0.0',
},
onInstall(nuxt) {
// This will be run when the module is first installed
console.log('Setting up my-module for the first time!')
},
onUpgrade(inlineOptions, nuxt, previousVersion) {
// This will be run when the module is upgraded
console.log(`Upgrading my-module from v${previousVersion}`)
}
})
The hooks are only triggered when both name
and version
are provided in the module metadata. Nuxt uses the .nuxtrc
file internally to track module versions and trigger the appropriate hooks. (If you haven't come across it before, the .nuxtrc
file should be committed to version control.)
!TIP This means module authors can begin implementing their own 'setup wizards' to provide a better experience when some setup is required after installing a module.
The new ignore
option for resolveFiles
(#32858) allows module authors to exclude specific files based on glob patterns:
// Resolve all .vue files except test files
const files = await resolveFiles(srcDir, '**/*.vue', {
ignore: ['**/*.test.vue', '**/__tests__/**']
})
A new getLayerDirectories
utility (#33098) provides a clean interface for accessing layer directories without directly accessing private APIs:
import { getLayerDirectories } from '@nuxt/kit'
const layerDirs = await getLayerDirectories(nuxt)
// Access key directories:
// layerDirs.app - /app/ by default
// layerDirs.appPages - /app/pages by default
// layerDirs.server - /server by default
// layerDirs.public - /public by default
Several kit utilities have been improved for better developer experience:
addServerImports
now supports single imports (#32289):// Before: required array
addServerImports([{ from: 'my-package', name: 'myUtility' }])
// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })
This release includes several internal performance optimizations:
useFetch
hook typing (#32891)<NuxtTime>
(#32893)As usual, our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
ignore
option to resolveFiles
(#32858)onInstall
and onUpgrade
module hooks (#32397)rolldown-vite
(#31812)defineRouteRules
to page rules
property (#32897)getLayerDirectories
util and refactor to use it (#33098)satisfies
in page augmentation (#32902)useFetch
hooks (#32891)resolvePath
and normalize file extensions (#32857)requestTimeout
+ allow configuration (#32874)node_modules/
if no custom srcDir
(#32987)route
object (#32899)defineNuxtModule().with()
(#33081)nuxtApp._runningTransition
on resolve (#33025)async/await
in afterEach
(#32999)setupTimeout
and add teardownTimeout
(#32868)webRoot
to use new app directory (df7177bff)app/
directory in layer guide (eee55ea41)--nightly
command (#32907)features.inlineStyles
default value (6ff3fbebb)useRoute
and accessing route in middleware (#33004)type: 'module'
in playground (#33099)import.meta.dev
(#33023)findWorkspaceDir
rather than relative paths to repo root (a6dec5bd9)expect.poll
(53fb61d5d)expect.poll
instead of expectWithPolling
(357492ca7)vi.waitUntil
instead of custom retry logic (611e66a47)Please see the release notes for Nuxt v4.1 for full details on the features and fixes in Nuxt v3.19.
As usual, our recommendation for upgrading is to run:
npx nuxt upgrade --dedupe
This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
ignore
option to resolveFiles
(#32858)onInstall
and onUpgrade
module hooks (#32397)rolldown-vite
(#31812)defineRouteRules
to page rules
property (#32897)getLayerDirectories
util and refactor to use it (#33098)satisfies
in page augmentation (#32902)useFetch
hooks (#32891)resolvePath
and normalize file extensions (#32857)requestTimeout
+ allow configuration (#32874)node_modules/
if no custom srcDir
(#32987)route
object (#32899)defineNuxtModule().with()
(#33081)nuxtApp._runningTransition
on resolve (#33025)async/await
in afterEach
(#32999)setupTimeout
and add teardownTimeout
(#32868)--nightly
command (#32907)useRoute
and accessing route in middleware (#33004)type: 'module'
in playground (#33099)import.meta.dev
(#33023)findWorkspaceDir
rather than relative paths to repo root (c4c3ada96)expect.poll
(f4354203a)expect.poll
instead of expectWithPolling
(15ca5be95)vi.waitUntil
instead of custom retry logic (4c8c13090)You can check out the new docs for v4 on https://ui4.nuxt.com while in alpha.
nullify
modifier to nullable
and add optional
(#4838)Read the migration guide to v4.
error
from form field (#4738) (00dfb6b)ui.modal
work (946c2ec)@source
on components (a16465f), closes #4773Full Changelog: https://github.com/nuxt/ui/compare/v4.0.0-alpha.0...v4.0.0-alpha.1
by
prop (#4791) (44382cd)Full Changelog: https://github.com/nuxt/ui/compare/v2.22.1...v2.22.2
update:model-value
event (#4853) (7133f50)Form
interface to accept RegExp (#4821) (0c2d390)focus-outside
event on content (77b6b9a)_blank
is flagged as external for Inertia (#4746) (520b277)colspan
calc for loading
and empty
states (#4826) (bdcc8c4)Full Changelog: https://github.com/nuxt/ui/compare/v3.3.2...v3.3.3