You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.
Découvrez toutes les notes de version du framework Nuxt
Sortie le 1 avril 2025
3.16.2 is the next patch release.
Our recommendation for upgrading is to run:
npx nuxi@latest 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.
useRequestEvent
on client (#31586 )
<Body>
and <Html>
(#31513 )
/index
is the last segment (#31528 )
page:loading:end
hook before navigation (#31504 )
document.cookie
(#31517 )
resolveComponent
(#31526 )
_nuxt/
paths in development (#31543 )
error.vue
(#31573 )
unhead
v2 api in default welcome + error pages (#31584 )
scanPageMeta
is disabled (0ba454b21 )
<NuxtPage>
(#31561 )
useServerHead
in onPrehydrate
with useHead
(#31585 )
useTemplateRef
(#31458 )
$fetch
(#31459 )
dedupe
flag (#31467 )
refreshNuxtData
docs (#31448 )
--
before --template
(#31469 )
resolveComponent
only auto-imports components with literal strings (#31511 )
tsconfig.json
(#31473 )
page:start
and page:finish
hooks (#31570 )
Sortie le 19 mars 2025
mocked-exports
(#31295 )
typedPages
implementation (#31331 )
app.head
example (#31350 )
addServerTemplate
to modules guide (#31369 )
rspack
and remove test-utils
for monorepo guide (#31371 )
ini
syntax block highlighting for .env
files (f79fabe46 )
useHydration
docs (#31427 )
srvx
and random port for remote provider (#31432 )
Sortie le 7 mars 2025
There's a lot in this one!
Say hello to create-nuxt
, a new tool for starting Nuxt projects (big thanks to @devgar for donating the package name)!
It's a streamlined version of nuxi init
- just a sixth of the size and bundled as a single file with all dependencies inlined, to get you going as fast as possible.
Starting a new project is as simple as:
npm create nuxt
Special thanks to @cmang for the beautiful ASCII-art . ❤️
Want to learn more about where we're headed with the Nuxt CLI? Check out our roadmap here , including our plans for an interactive modules selector .
We've upgraded to unhead
v2, the engine behind Nuxt's <head>
management. This major version removes deprecations and improves how context works:
// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
const unhead = injectHead(options.nuxt)
return head(input, { head: unhead, ...options })
}
If you're using Unhead directly in your app, keep in mind:
#app/composables/head
instead of @unhead/vue
@unhead/vue
might lose async context
Don't worry though - we've maintained backward compatibility in Nuxt 3, so most users won't need to change anything!
If you've opted into compatibilityVersion: 4
, check out our upgrade guide for additional changes.
Nuxt Devtools has leveled up to v2 (#30889 )!
You'll love the new features like custom editor selection, Discovery.js for inspecting resolved configs (perfect for debugging), the return of the schema generator, and slimmer dependencies.
One of our favorite improvements is the ability to track how modules modify your Nuxt configuration - giving you X-ray vision into what's happening under the hood.
👉 Discover all the details in the Nuxt DevTools release notes .
We're continuing to make Nuxt faster, and there are a number of improvements in v3.16:
exsolve
for module resolution (#31124 ) along with the rest of the unjs ecosystem (nitro, c12, pkg-types, and more) - which dramatically speeds up module resolution
loadNuxt
by skipping unnecessary resolution steps (#31176 ) - faster startups
oxc-parser
for parsing in Nuxt plugins (#30066 )
All these speed boosts happen automatically - no configuration needed!
Shout out to CodSpeed with Vitest benchmarking to measure these improvements in CI - it has been really helpful.
To add some anecdotal evidence, my personal site at roe.dev loads 32% faster with v3.16, and nuxt.com is 28% faster. I hope you see similar results! ⚡️
We're very pleased to bring you native delayed/lazy hydration support (#26468 )! This lets you control exactly when components hydrate, which can improve initial load performance and time-to-interactive. We're leveraging Vue's built-in hydration strategies - check them out in the Vue docs .
<template>
<!-- Hydrate when component becomes visible in viewport -->
<LazyExpensiveComponent hydrate-on-visible />
<!-- Hydrate when browser is idle -->
<LazyHeavyComponent hydrate-on-idle />
<!-- Hydrate on interaction (mouseover in this case) -->
<LazyDropdown hydrate-on-interaction="mouseover" />
<!-- Hydrate when media query matches -->
<LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
<!-- Hydrate after a specific delay in milliseconds -->
<LazyFooter :hydrate-after="2000" />
</template>
You can also listen for when hydration happens with the @hydrated
event:
<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />
Learn more about lazy hydration in our components documentation .
You can now fine-tune which files Nuxt scans for pages (#31090 ), giving you more control over your project structure:
export default defineNuxtConfig({
pages: {
// Filter specific files or directories
pattern: ['**/*.vue'],
}
})
We've made debugging with the debug
option more flexible! Now you can enable just the debug logs you need (#30578 ):
export default defineNuxtConfig({
debug: {
// Enable specific debugging features
templates: true,
modules: true,
watchers: true,
hooks: {
client: true,
server: true,
},
nitro: true,
router: true,
hydration: true,
}
})
Or keep it simple with debug: true
to enable all these debugging features.
For the decorator fans out there (whoever you are!), we've added experimental support (#27672 ). As with all experimental features, feedback is much appreciated.
export default defineNuxtConfig({
experimental: {
decorators: true
}
})
function something (_method: () => unknown) {
return () => 'decorated'
}
class SomeClass {
@something
public someMethod () {
return 'initial'
}
}
const value = new SomeClass().someMethod()
// returns 'decorated'
It's been much requested, and it's here! Auto-scanned local layers (from your ~~/layers
directory) now automatically create aliases. You can access your ~~/layers/test
layer via #layers/test
(#30948 ) - no configuration needed.
If you want named aliases for other layers, you can add a name to your layer configuration:
export default defineNuxtConfig({
$meta: {
name: 'example-layer',
},
})
This creates the alias #layers/example-layer
pointing to your layer - making imports cleaner and more intuitive.
We've greatly improved error messages and source tracking (#31144 ):
useAsyncData
calls with precise file location information
Plus, we're now using Nitro's beautiful error handling (powered by youch ) to provide more helpful error messages in the terminal, complete with stacktrace support.
Nitro now also automatically applies source maps without requiring extra Node options, and we set appropriate security headers when rendering error pages.
For module authors, we've added the ability to augment Nitro types with addTypeTemplate
(#31079 ):
// Inside your Nuxt module
export default defineNuxtModule({
setup(options, nuxt) {
addTypeTemplate({
filename: 'types/my-module.d.ts',
getContents: () => `
declare module 'nitropack' {
interface NitroRouteConfig {
myCustomOption?: boolean
}
}
`
}, { nitro: true })
}
})
We've upgraded to Nitro v2.11. There are so many improvements - more than I can cover in these brief release notes.
👉 Check out all the details in the Nitro v2.11.0 release notes .
unjs
Major Versions This release includes several major version upgrades from the unjs ecosystem, focused on performance and smaller bundle sizes through ESM-only distributions:
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --dedupe
This refreshes your lockfile and pulls in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
@nuxt/devtools
to v2 (#30889 )
NuxtPage
(#30704 )
directoryToURL
to normalise paths (#30986 )
start
/set
in loading indicator (#30989 )
pages/
(#31090 )
NuxtLink
slot (#31104 )
addTypeTemplate
(#31079 )
oxc-parser
instead of esbuild + acorn (#30066 )
exsolve
for module resolution (#31124 )
loadNuxt
(#31176 )
<NuxtLayout>
fallback
prop is typed (#30832 )
keepalive
cache reset (#30807 )
div
wrapper in client-only pages (#30425 )
nitropack
(aba75bd5a )
null
from resolve functions (d68e8ce57 )
app.head.meta
values are undefined (#30959 )
shared/
directories available within layers (#30843 )
<pre>
when rendering dev errors (9aab69ec4 )
page:transition:start
type (#31040 )
provide
/ inject
work in setup
of defineNuxtComponent
(#30982 )
_
for NuxtIsland name on server pages (#31072 )
ohash
to calculate legacy async data key without hash (#31087 )
shared
dir from config (#31091 )
nuxt.options.pages
to detected configuration (#31101 )
definePageMeta
does not receive an object (#31156 )
no-ssr
middleware handler (a99c59fbd )
navigate
with vue-router
(7a1934509 )
nuxt.options.pages
(fa480e0a0 )
resolveModule
(6fb5c9c15 )
resolveTypePath
(a0f9ddfe2 )
compilerOptions.paths
(835e89404 )
RawVueCompilerOptions
for unresolved tsconfig
(#31202 )
navigateTo
with replace (#31244 )
devStorage
(#31233 )
useFetch
function name on server for warning (#31213 )
x-nitro-prerender
header (2476cab9a )
isEqual
from ohash/utils
(2e27cd30c )
noScripts
route rule (#31083 )
runtime/nitro
files (#31131 )
spaLoadingTemplate
example (#30830 )
NuxtPage
(#30781 )
navigateTo
docs with clearer structure and examples (#30876 )
rootDir
(27e356fe6 )
vue:setup
and app:data:refresh
hooks (#31001 )
defineNuxtRouteMiddleware
(#31005 )
port
option to preview command (#30999 )
.nuxtrc
documentation (#31093 )
$fetch
on the server (#31114 )
create nuxt
command (fe82af4c9 )
3x
(a243f8fcf )
<NuxtPage>
during page changes (#31116 )
typedPages
in unhoisted pnpm setups (#31262 )
errx
dependency (566418177 )
@nuxtjs/mdc
typechecking dep (f23683b26 )
nitro/renderer
templates (b29c0e86b )
#internal/nitro/app
(a1b855cc5 )
Sortie le 29 janvier 2025
3.15.4 is the next patch release.
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
acorn
(#30754 )
@nuxt/schema
from nuxt
package dir (#30774 )
srcDir
(#30771 )
useRoute
in SFC setup (#30788 )
externality
for dev server externals (#30802 )
chunk.names
for asset names (#30780 )
Sortie le 24 janvier 2025
3.15.3 is the next regularly scheduled patch release.
Alongside a range of improvements, we've also shipped a significant fix to impose CORS origin restrictions on the dev server . This applies to your Vite or Webpack/Rspack dev middleware only.
This is a significant/breaking change we would not normally ship in a patch but it is a security fix (see https://github.com/nuxt/nuxt/security/advisories/GHSA-4gf7-ff8x-hq99 and https://github.com/nuxt/nuxt/security/advisories/GHSA-2452-6xj8-jh47 ) and we urge you to update ASAP.
You can configure the allowed origins and other CORS options via the devServer.cors
options in your nuxt.config
, which may be relevant if you are developing with a custom hostname:
export default defineNuxtConfig({
devServer: {
cors: {
origin: ['https://custom-origin.com'],
},
},
})
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
mkdirSync
calls (#30651 )
findPath
and resolvePath
(#30682 )
Transition
component only on client side (#30720 )
#app-manifest
alias (#30618 )
plugin.src
for variable name generation (#30649 )
dev
/test
environment value (#30667 )
invalidateModule
call (9bd71e498 )
[[
optional dynamic params (#30619 )
devServer.cors
(406db5b4d )
externality
and use vite internal config (#30634 )
useFetch
example (#30629 )
nuxi
source code (4fabe0025 )
NuxtLink
(#30614 )
addRouteMiddleware
(#30656 )
ClientOnly
with onMounted
hook (#30670 )
navigation
mode in callOnce
composable (#30612 )
inlineDependencies
option (01adefcec )
lodash-es
(0c01273f5 )
Sortie le 15 janvier 2025
3.15.2 is the next regularly scheduled patch release.
It is worth noting that this release includes some pretty significant performance improvements which you should notice particularly in the startup time. In my tests in the nuxt monorepo,
fixture | time to vite build complete (v3.15.1) | time to vite build complete (v3.15.2) |
---|---|---|
minimal | 850ms | 710ms |
everything bagel | 3,021ms | 1,690ms |
There's more improvement to do here but hopefully these are good numbers!
To improve performance within Nuxt projects, we've published a new @nuxt/cli
distribution of nuxi
, which is used under-the-hood in nuxt
(see issue ). This should behave exactly the same and nothing needs to be updated in your projects (for example, you will continue to use the nuxi
or nuxt
commands). The only significant change is that it no longer inlines dependencies. Feedback is welcome 🙏
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
@nuxt/cli
dependency (#30526 )
definePageMeta
when extracting page metadata (#30490 )
#build
to the end of tsConfig
paths (#30520 )
fullPath
instead of empty string in router hmr (#30500 )
@nuxt/cli
(618bbc6da )
page:loading:end
only once with nested pages (#29009 )
#app-manifest
(#30587 )
shouldPrefetch
on the server side (#30591 )
--dev
option for the module command (#30477 )
url
in useFetch
(#30531 )
@nuxt/module-builder
source (509cf4a5c )
status
detail and enhance getCachedData
readability (#30536 )
useNuxtData
(#30570 )
useAsyncData
side effects (#30479 )
nuxt/app
(1adf3e31f )
Sortie le 5 janvier 2025
3.15.1 is the next regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
lodash-es
dependency (#30409 )
pathe
browser dep for deep server components (#30456 )
nuxt
instance to resolvePagesRoutes
(e4a372e12 )
location
instead of range
for route meta property extraction (#30447 )
vueCompilerOptions.plugins
type (#30454 )
baseURL
when ignoring prerendered manifest (#30446 )
router.options
when hmring routes (#30455 )
consola
with nuxt
tag instead of console (#30408 )
lodash
and recommend es-toolkit
(8e2ca5bdc )
Sortie le 24 décembre 2024
Happy holidays! You'll notice when you start Nuxt that (if you're in the Northern Hemisphere) there's some snow on the loading screen (#29871 ).
Nuxt v3.15 includes Vite 6 for the first time. Although this is a major version, we expect that this won't be a breaking change for Nuxt users (see full migration guide ). However, please take care if you have dependencies that rely on a particular Vite version.
One of the most significant changes with Vite 6 is the new Environment API, which we hope to use in conjunction with Nitro to improve the server dev environment. Watch this space!
You can read the full list of changes in the Vite 6 changelog .
We talk a lot about the Nuxt DevTools, but v3.15 ships with better integration in dev mode for Chromium-based browser devtools.
We now use the Chrome DevTools extensibility API to add support for printing nuxt hook timings in the browser devtools performance panel.
callOnce
callOnce
is a built-in Nuxt composable for running code only once. For example, if the code runs on the server it won't run again on the client. But sometimes you do want code to run on every navigation - just avoid the initial server/client double load. For this, there's a new mode: 'navigation'
option that will run the code only once per navigation. (See #30260 for more info.)
await callOnce(() => counter.value++, { mode: 'navigation' })
We now implement hot module reloading for Nuxt's virtual files (like routes, plugins, generated files) as well as for the content of page metadata (within a definePageMeta
macro) (#30113 ).
This should mean you have a faster experience in development, as well as not needing to reload the page when making changes to your routes.
We now support extracting extra page meta keys (likely used by module authors) via experimental.extraPageMetaExtractionKeys
(#30015 ). This enables module authors to use this information at build time, in the pages:resolved
hook.
We also now support local functions in definePageMeta
(#30241 ). This means you can do something like this:
function validateIdParam(route) {
return !!(route.params.id && !isNaN(Number(route.params.id)))
}
definePageMeta({
validate: validateIdParam,
})
We now preload the app manifest in the browser if it will be used when hydrating the app (#30017 ).
We'll also tree shake vue-router's hash mode history out of your bundle if we can - specifically, if you haven't customised your app/router.options.ts
(#30297 ).
A few more changes shipped for the new defaults for v4, including only inlining styles by default for Vue components (#30305 ).
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
extraPageMetaExtractionKeys
(#30015 )
definePageMeta
(#30241 )
mode: 'navigation'
to callOnce
(#30260 )
hashMode
option (#30297 )
addServerTemplate
(a02af2348 )
extraExtractionKeys
on runtime route.meta
(ae9f42f4a )
style
value for head components (#29999 )
useId
implementation (40f437d25 )
buildDir
to normalizeTemplate
(#30115 )
useRequestFetch
(#30117 )
nitropack
rather than nitro
import (2d5b53b23 )
engines.node
to match dependencies (#30139 )
routerOptions.history
to return null (#30192 )
useId
for island client component teleport id (#30151 )
nuxt
and nuxt/app
(#30148 )
getRouteRules
works with nitro signature (#30277 )
replace
in middleware with navigateTo
(#30283 )
nitropack
(f220314a5 )
<RouterLink>
for links starting with #
(#30190 )
#app-manifest
(ec613e533 )
useId
for client-fallback
component uid (#30314 )
@vitest/
(4171a1076 )
addTemplate
if undefined (#30348 )
import.meta.hot.data
(b1cf5781d )
composable-keys
plugin into nuxt core (#30029 )
nuxt:
(#30028 )
event.waitUntil
(#29583 )
vite.dev
(#30111 )
nuxi upgrade
channel flag (#30184 )
useLazyFetch
(#30171 )
vite.css.preprocessorMaxWorkers
(eb1ba017c )
compatibilityVersion
feature flag (#30274 )
nuxi
command pages (#30199 )
inlineStyles
(2660bffbc )
unimport
(7ee455969 )
installed-check
dependency (0e84cb9a4 )
engines.node
to reflect only deps (d3d276919 )
rimraf
(cf9d82c5a )
div
wrapper in client-only page (#30359 )
Sortie le 19 novembre 2024
3.14.1592 is the next patch release.
webpackbar
with support for rspack (#29823 )
dst
to deduplicate templates when adding them (#29895 )
dst
to invalidate modules (6cd3352de )
change
events (#29954 )
<NuxtWelcome>
when building (#29956 )
Sortie le 6 novembre 2024
3.14.159 is a hotfix release to address regressions in v3.14.
We're leaning into the π theme - future patch releases of this minor version will just continue adding digits. (Sorry for any inconvenience! 😆)
module.json
(#29793 )
mlly
to resolve module paths to avoid cjs fallback (#29799 )
webpack-dev-middleware
(#29806 )
Sortie le 4 novembre 2024
3.14.0 is the next minor release.
Behind the scenes, a lot has been going on in preparation for the release of Nuxt v4 (particularly on the unjs
side with preparations for Nitro v3!)
jiti
Loading the nuxt config file, as well as modules and other build-time code, is now powered by jiti
v2. You can see more about the release in the jiti v2 release notes , but one of the most important pieces is native node esm import (where possible), which should mean a faster start. ✨
You should never import Vue app code in your nitro code (or the other way around). But this has meant a friction point when it comes to sharing types or utilities that don't rely on the nitro/vue contexts.
For this, we have a new shared/
folder (#28682 ). You can't import Vue or nitro code into files in this folder, but it produces auto-imports you can consume throughout the rest of your app.
If needed you can use the new #shared
alias which points to this folder.
The shared folder is alongside your server/
folder. (If you're using compatibilityVersion: 4
, this means it's not inside your app/
folder.)
rspack
builder We're excited to announce a new first-class Nuxt builder for rspack
. It's still experimental but we've refactored the internal Nuxt virtual file system to use unplugin
to make this possible.
Let us know if you like it - and feel free to raise any issues you experience with it.
👉 To try it out, you can use this starter - or just install @nuxt/rspack-builder
and set builder: 'rspack'
in your nuxt config file.
We have new useResponseHeader
and useRuntimeHook
composables (#27131 and #29741 ).
We now have a new addServerTemplate
utility (#29320 ) for adding virtual files for access inside nitro runtime routes.
We've merged some changes which only take effect with compatibilityVersion: 4
, but which you can opt-into earlier.
~/components/App/Header.vue
this would be visible in your devtools as <Header>
. From v4 we ensure this is <AppHeader>
, but it's opt-in to avoid breaking any manual <KeepAlive>
you might have implemented. (#28745 ).
pages:extend
. But this has led to some confusing behaviour, as pages added at this point do not end up having their page metadata respected. So we now do not scan metadata before calling pages:extend
. Instead, we have a new pages:resolved
hook, which is called after pages:extend
, after all pages have been augmented with their metadata. I'd recommend opting into this by setting experimental.scanPageMeta
to after-resolve
, as it solves a number of bugs.
They didn't quite make it in time for v3.14 but for the next minor release you can expect (among other things):
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
jiti
(#29073 )
addServerTemplate
utility (#29320 )
useResponseHeader
composable (#27131 )
rspack
builder (#29142 )
pages:resolved
hook + scan meta post extend (#28861 )
definePageMeta
(#29586 )
shared/
folder and #shared
alias (#28682 )
useRuntimeHook
composable (#29741 )
useNuxtApp
(#29514 )
InjectionType
template conditional (#29023 )
webpack
memfs (#29027 )
DOMException
as fetch abort exception (#29058 )
devServer.https
(#29049 )
buildDir
in dev mode (#29068 )
node_modules/
from parent urls (5bd42c893 )
crossorigin
attribute for stylesheets (#29138 )
routeRules
to hint pages to prerender (#29172 )
link:prefetch
(#29321 )
ConfigLayer
type from c12
(#29370 )
typedPages
(#29352 )
configFile
as required in layer type (3bbcd7d21 )
createIsExternal
(686be8168 )
props
value in definePageMeta
(#29683 )
nitropack/types
to ensure api routes are typed (54096875e )
addBuildPlugin
internally (#29157 )
defineNuxtComponent
instead of defineComponent
(#29011 )
useRequestFetch
and event.$fetch
(#29099 )
useFetch
errors (#29253 )
ofetch
headers for interceptors (#29118 )
.env.test
(#29398 )
mockImplementation()
call (#29669 )
$fetch
(#29755 )
--envName
flag (#28909 )
beasties
(1b5391182 )
unbuild
update (71e0fb06f )
jiti.import
(7ece49f9b )
unctx
transform (d81196122 )
Sortie le 15 septembre 2024
3.13.2 is the next regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
propsDestructure
by default (#28830 )
route
has enumerable keys (#28841 )
asyncData
(#28842 )
ssr: false
(#28834 )
injectAtEnd
to reduce circular auto-imports (#28822 )
buildDir
for unimport (#28899 )
<NuxtErrorBoundary>
(#28901 )
modules
array (#28922 )
filePath
(#28925 )
runWithContext
generic (#28926 )
inheritAttrs: false
for fragment components (#28939 )
<script>
blocks (4fd24381c )
isNuxtMajorVersion
export (#29016 )
useError
(#28996 )
vite:preloadError
event (#28862 )
useFetch
parameter signature (#28993 )
noUncheckedSideEffectImports
(#28903 )
pending triage
to blank issues (#28923 )
htmlnano
+ pin workflow deps (#28946 )
route
in template (#28967 )
Sortie le 4 septembre 2024
3.13.1 is the next regularly scheduled patch release.
Although this is a patch release, there are two features I'd love to draw your attention to.
useId
now uses a built-in Vue composable for stable ids between server + client! #28285
experimental.buildCache
feature now allows for quicker app rebuilds #28726
As always, feedback is appreciated 🙏 ❤️
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
ServerPlaceholder
for ssr client components (#28563 )
serverDir
relative to root (#28700 )
MiddlewareKey
(#28676 )
NuxtLink
(#28738 )
NuxtOptions
as well as config (#28747 )
CookieStore
events (#28760 )
appConfig
with non-iterable objects (#28773 )
isNuxtError
type inference (#28814 )
useId
(#28285 )
query
returned value from useRoute()
(#28743 )
--frozen-lockfile
when installing dependencies (#28794 )
tinyexec
internally (#28684 )
tinyglobby
internally (#28686 )
Sortie le 22 août 2024
I'm pretty excited about this release - we've ported some features we had planned for Nuxt v4 back to v3, as well as a raft of bug fixes and performance improvements - as usual.
Here are a few of things I'm most excited about.
We now support naming directories with parentheses/brackets to organise your routes without affecting the path.
For example:
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
This will produce /
, /about
and /contact
pages in your app. The marketing
group is ignored for purposes of your URL structure.
Read more in the original PR .
It's now possible for server component islands to manipulate the head, such as by adding SEO metadata when rendering.
Read more in #27987 .
We now support custom prefetch triggers for NuxtLink
(#27846 ).
For example:
<template>
<div>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
<!-- note that you probably don't want both enabled! -->
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</div>
</template>
It's also possible to enable/disable these globally for your app and override them per link.
For example:
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: true,
prefetchOn: { visibility: false, interaction: true }
}
}
}
})
When running with node --enable-source-maps
, you may have noticed that the source maps for the Vue files in your server build pointed to the Vite build output (something like .nuxt/dist/server/_nuxt/index-O15BBwZ3.js
).
Now, even after your Nitro build, your server source maps will reference your original source files (#28521 ).
Note that one of the easiest ways of improving your build performance is to turn off source maps if you aren't using them, which you can do easily in your nuxt.config
:
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
In the run-up to Nuxt v4, we're working on adding some key functionality for module authors, including a new isNuxtMajorVersion
utility where required (#27579 ) and better inferred typing for merged module options using the new defineNuxtModule().with()
method (#27520 ).
We no longer warn when using data fetching composables in middleware (#28604 ) and we warn when user components' names begin with Lazy (#27838 ).
For a while, in the Vue ecosystem, we've been augmenting @vue/runtime-core
to add custom properties and more to vue
. However, this inadvertently breaks the types for projects that augment vue
- which is now the officially recommended in the docs way to augment these interfaces (for example, ComponentCustomProperties , GlobalComponents and so on ).
This means all libraries must update their code (or it will break the types of libraries that augment vue
instead).
We've updated our types in Nuxt along these lines but you may experience issues with the latest vue-router
when used with libraries which haven't yet done so.
Please create an issue with a reproduction - I'll happily help create a PR to resolve in the upstream library in question. Or you may be able to work around the issue by creating a declarations.d.ts
in the root of your project with the following code (credit ):
import type {
ComponentCustomOptions as _ComponentCustomOptions,
ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends _ComponentCustomProperties {}
interface ComponentCustomOptions extends _ComponentCustomOptions {}
}
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
routes
function in router.options
(#27644 )
isNuxtMajorVersion
compatibility util (#27579 )
.with
for better module options types (#27520 )
Lazy
(#27838 )
usePreviewMode
(#28371 )
prepend
option to addRouteMiddleware
(#28496 )
__NUXT__
when using multi-app (#27263 )
decode
function only for named cookie (#28215 )
getCachedData
(#28472 )
definePageMeta
in client-only pages (#28246 )
dist/runtime/
in tsconfig includes (#28237 )
assetsDir
(59f0099f4 )
serverDir
(#28249 )
vite-plugin-vue
(#28307 )
scroll-padding-top: auto
in scrollBehavior (#28320 )
runtimeConfig.public
is reactive on client (#28443 )
nuxt/scripts
(#28449 )
@vue/runtime-core
and @vue/runtime-dom
(#28446 )
baseURL
for public assets in dev (#28482 )
useFetch
(#28517 )
vue
, not sub-packages (#28542 )
route.meta
(#28441 )
validate
method (#28612 )
prefetchOn
prop (#28630 )
vue
lang to sample code (#28247 )
splitSetCookieString
from cookie-es
(29f95ae0d )
headers.getSetCookie
(45c6df9a4 )
bunx
-> bun x
(#28277 )
@see
blocks (#28270 )
mountSuspended
(#28463 )
options
type in custom useFetch recipe (#28389 )
pageTransition
in client-only page (#27839 )
SharedComponent
in server head (510f3e28f )
Sortie le 18 juillet 2024
3.12.4 is the next regularly scheduled patch release.
resolveId
in layers (#27971 )
noScripts
(#27972 )
/
as fallback if page can't be identified (e6109b226 )
html-validate
(#28024 )
unhead
key for ad-hoc module options (#28088 )
getNuxtVersion
returns string
(#28125 )
scroll-padding-top
in scrollBehavior (#28083 )
useAsyncData
returns undefined (#28154 )
getCachedData
null response (d10cea11b )
app/
as srcDir
if it doesn't exist (#28176 )
serverDir
within layers using v4 compat (#28177 )
getCachedData
to return undefined (#28187 )
addEventListener
to register cookie store listener (#28193 )
set-cookie
headers (#28211 )
postcss
module loading (#27946 )
_registeredComponents
from ssrContext (#27819 )
errx
to handle dev log traces (#28027 )
nuxtApp.runWithContext
(#28000 )
pending
variable from data fetching docs (#28011 )
layers/
directory (#28128 )
typeCheck
test in minimal build (#28166 )
Sortie le 2 juillet 2024
3.12.3 is the next regularly scheduled patch release.
fs-extra
(#27787 )
chokidar
when a custom srcDir
is provided (#27871 )
prefetchComponents
is treeshaken on server (#27905 )
dir.app
(0c73cb734 )
navigateTo
called with open
(#27742 )
refresh
type in server component refs (#27778 )
#vue-router
alias for backwards compat (#27896 )
nuxt
types (#27900 )
?raw
from head when in dev mode (#27940 )
performance.now
to measure time (d14f7ec46 )
refreshCookie
on useCookie
doc page (#27744 )
main
branch (e7fbc9f81 )
useFetch
/AsyncData
in wrappers (#27785 )
vue-router
docs (#27895 )
compatibilityVersion
is available in the latest release (#27919 )
Nuxt 3
-> Nuxt
or Nuxt 3+
(3c16c890c )
ref
s (#27933 )
4x
tag for v4 nightly releases (9d5dd5494 )
dev-bundler
(e3448fa0d )
2.x
branch (8003cf72f )
main
branch (7abd982f8 )
@vitejs/plugin-vue
again (56660cbdd )
Sortie le 16 juin 2024
3.12.2 is the a regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
onNuxtReady
callback without arguments (#27428 )
app/
dir backwards compatibility (#27529 )
ssr: false
(#27542 )
runtimeConfig
key (9e56b60c6 )
#app/defaults
rather than augmenting (#27567 )
useRouteAnnouncer
(#27562 )
_installedModules
(e4bfea642 )
app.rootId
with app.rootAttrs.id
(#27630 )
mergeProps
import in islands transform (#27622 )
vite.cacheDir
if defined (#27628 )
close
is called (#27637 )
/
even if pages module isn't enabled (dabcb5ecc )
head
(#27575 )
clear()
function added in 3.11 (#27615 )
webpack-virtual-modules
(58dd7f3a6 )
Sortie le 11 juin 2024
3.12.1 is a hotfix release to address a typo in the nuxt/script stub auto-imports.
@nuxt/scripts
(0252000d7 )
CompatibilityDateSpec
(#27521 )
Sortie le 11 juin 2024
We're on the road to the release of Nuxt 4, but we've not held back in Nuxt v3.12. A huge thank you to the 75+ Nuxt contributors and community members who have been part of this release. ❤️
Nuxt 4 is on the horizon, and it's now possible to test out the behaviour changes that will be coming in the next major release (#26925 ) by setting an option in your nuxt.config
file:
export default defineNuxtConfig({
future: {
compatibilityVersion: 4,
},
})
As we've been merging PRs for Nuxt 4, we've been enabling them behind this flag. As much as possible we're aiming for backwards compatibility - our test matrix is running the same fixtures in both v3 and v4 compatibility mode.
There is a lot to say here, with 10+ different PRs and behaviour changes documented and testable, but for full details, including migration steps, see the v4 upgrade documentation .
We'd be very grateful for early testing of what's coming in Nuxt 4! 🙏
We've been gradually working to release Nuxt Scripts . It's currently in public preview, but we're near a public release, so we've added some stubs for composables that (when used) will prompt installing the @nuxt/scripts
module.
👉 Watch out for the launch - and an article explaining more!
Just like ~/modules
, any layers within your project in the ~/layers
directory will now be automatically registered as layers in your project (#27221 ).
We also now correctly load layer dependencies, which should resolve a range of issues with monorepos and git installations (#27338 ).
We now have a built-in <NuxtRouteAnnouncer>
component and corresponding useRouteAnnouncer
composable, which will be added by default to new Nuxt templates going forward.
For full details, see the original PR (#25741) and documentation .
We're continuing to work on nuxt/a11y
- expect to hear more on that in future!
We've landed some performance improvements as well, many of which are behind the compatibilityVersion: 4
flag, such as a move away from deeply reactive asyncData payloads.
Significant improvements include deduplicating modules (#27475 ) - which will apply mostly to layer users who specify modules in their layers. In one project, we saw 30s+ improvement in starting Nuxt.
We've also improved Vite dev server start up time by excluding common ESM dependencies from pre-bundling, and would suggest module authors consider doing the same (#27372 ).
We improved chunk determinism, so sequential builds should be less likely to have completely different chunk hashes (#27258 ).
And we tree shake more client-only composables from your server builds (#27044 ), and have reduced the size of server component payloads (#26863 ).
We've landed a couple of changes that take us toward a place of supporting multi-app natively in Nuxt, including a multiApp
experimental flag (#27291 ) and the ability to have multiple Nuxt app instances running in parallel at runtime (#27068 ).
While it's not yet ready, please do follow along on the tracker issue , and feel free to pitch in if this is interesting to you.
We now serialise more things in your dev server logs, including VNodes (#27309 ) and URLs . We also addressed a bug that could lead to a frozen dev server.
When accessing private runtime config in the browser, we now let you know with a more informative error message (#26441 ).
We've removed some experimental options that have been stabilised and which we feel no longer need to be configurable:
experimental.treeshakeClientOnly
(enabled by default since v3.0.0)
experimental.configSchema
(enabled by default since v3.3.0)
experimental.polyfillVueUseHead
(disabled since v3.4.0) - implementable in user-land with plugin
experimental.respectNoSSRHeader
(disabled since v3.4.0) - implementable in user-land with server middleware
We've also enabled scanPageMeta
by default (#27134 ). This pulls out any page metadata in your definePageMeta
macro, and makes it available to modules (like @nuxtjs/i18n
) so they can augment it.
This unlocks much better module/typed routing integration, but has a potential performance cost - so please file an issue if you experience any problems.
We now have support for typed #fallback
slots in server components (#27097 ).
We've also improved some defaults in your generated tsconfig.json
, including setting module: 'preserve'
if you have a locally installed TypeScript v5.4 version (see docs ) - see #26667 , #27485 .
We have shipped a range of type improvements for module authors, including:
installModule
(#26744 )
onPrehydrate
hook for hooking into the browser hydration cycle (#27037 )
useRuntimeConfig
and updateRuntimeConfig
utils (#27117 )
If you previously used @nuxt/ui-templates
then it may be worth knowing that we have moved them from a separate repository into the nuxt/nuxt monorepo. (This is purely a refactor rather than a change, although you can expect some new designs for Nuxt v4.)
As usual, our recommendation for upgrading is to run:
npx nuxi@latest upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
useRequestURL
(#26687 )
imports.scan
option (#26576 )
<NuxtRouteAnnouncer>
and useRouteAnnouncer
(#25741 )
resolvePath
and findPath
(#26465 )
useLink
from NuxtLink
(#26522 )
future.compatibilityVersion
(#26925 )
app.rootAttrs
and teleportAttrs
(#27014 )
cookieStore
by default (f597ca59a )
onUpdated
and onUnmounted
on server (#27044 )
nuxt/scripts
on usage (#27010 )
<NuxtPage>
(#27050 )
renderSSRHeadOptions
config for unhead
(#26989 )
onPrehydrate
lifecycle hook (#27037 )
#fallback
slot to server components types (#27097 )
useRuntimeConfig
and updateRuntimeConfig
utils (#27117 )
layers/
directory (#27221 )
appId
and improve chunk determinism (#27258 )
multiApp
flag (#27291 )
compatibilityVersion
(#27305 )
URL
serialiser for dev server logs (a549b46e9 )
this.$route
(#27313 )
installModule
(#26744 )
.with
for better module options types (#26850 )
compatibilityDate
flag for future (#27512 )
asyncData
watch when unmounted (#26821 )
ssrContext.styles
reference (from unused vue-style-loader
) (2d1ab61b2 )
shallowReactive
(#27214 )
getCachedData
from shaping type of useAsyncData
(#25946 )
hasSuffix
(#26725 )
moduleDetection
to 'force' (#26667 )
nuxt._ignore
after all modules run (#26680 )
v-for
to slot in islands (#26880 )
_scope
is active before calling run
function (#26756 , #26904 )
enabled
is false
(#26906 )
lang="ts"
(#26912 )
updateAppConfig
(#26949 )
useState
in NuxtClientFallback
setup function (#26928 )
.js
extension from template imports (0d4a622f3 )
runWithContext
(#26976 )
app.vue
exists in rootDir
(1af81ed0f )
URL
constructor to resolve external protocols (5f0693a69 )
URL
for parsing URLs rather than parseURL
(ea22d3f98 )
process.*
flags (#27089 )
NuxtTeleportIslandComponent
(#27093 )
spaLoadingTemplate
function (0e12b6eb8 )
jiti
and not file URL (#27252 )
buildId
in schema (#27274 )
location
header in navigateTo
(#27280 )
undefined
rather than null
for data fetching defaults (#27294 )
app.cdnURL
for extracted payloads (#26668 )
VNode
reviver & don't deduplicate dev logs (#27309 )
app.config
files in nitro build (#27342 )
app.config.d.ts
(#27350 )
optimizeDeps
in ssr (#27356 )
hmr.server
is set (#27326 )
app
options (#27478 )
app.head
arrays (#27480 )
tsconfig.json
(#27485 )
buildAssetsDir
in island teleport dev chunk (#27469 )
module: preserve
unelss ts v5.4 is installed (b08dfc98b )
pages:extend
hook (#27134 )
esnext
target (7bb02735e )
boolean
value for dedupe
in v4 compat (#27511 )
scopeId
to server components (#27497 )
dependsOn
works not just for parallel plugins (#26707 )
--preset
flag for nuxi build
(#26759 )
useFetch
(#26748 )
callWithNuxt
(#26771 )
srcDir
description mentioning deprecated static/
directory (#26804 )
pageRef
from a child page (#26806 )
pending
value in data fetching composables (#26766 )
@vue/test-utils
getting started guide (#26205 )
a
-> an
(#26856 )
usePreviewMode
explanation (#26602 )
defineConfig
(a60de743a )
@since
annotations to exported functions (#25365 )
.eslintrc.js
to eslint.config.js
(#27020 )
future.compatibilityVersion
(e7789a257 )
nuxi init
(#27051 )
ignorePrefix
to clarify ignored files (#27065 )
app.config.ts
to nuxt 4 testing/migration (#27164 )
useFetch
recipe (#27208 )
nuxt/scripts
(#27229 )
<NuxtLink>
(#27284 )
baseURL
and cdnURL
(#27273 )
partitioned
attribute of useCookie
(#27297 )
error
hook type (61766702c )
srcDir
in upgrade steps (3383a2df2 )
moduleResolution
to Bundler
(#26658 )
@nuxt/eslint-config
(#26653 )
devcontainer.json
syntax (#26776 )
conventionalcommits.org
(9ba1ebe98 )
@nuxt/ui-templates
to core monorepo (fe6bdcc01 )
ui-templates
(15781c608 )
@internal
comment (cf736e274 )
eslint-plugin-regexp
(#27271 )
ui-templates
when stubbing packages (#27446 )
jiti
and @vitejs/plugin-vue
(2a2847e4b )
shamefully-hoist
within repo (#27483 )
jiti
(#27479 )
ui-templates
as valid scope (5afd75b88 )
Sortie le 4 avril 2024
3.11.2 is the next regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
useServerHead
in dev (#26421 )
navigateTo
open
option on server side (#26392 )
definePageMeta
in server pages (#26422 )
joinRelativeURL
+ share paths on server (#26407 )
<srcDir>/index.html
from import protection (#26430 )
refreshCookie
on server (22ada37b4 )
v-if
to wrapper in islands transform (#26386 )
getLatestManifest
(#26486 )
GlobalComponents
in multiple vue modules (#26541 )
transformAssetUrls
+ pass hoistStatic
to vite plugin (#26563 )
typescript.shim
(#26607 )
useRoute
(#26633 )
navigateTo
for server (#26546 )
runtimeConfig
initialization of client side (#26558 )
prerenderRoutes
in dynamic routes (#26547 )
process.*
with import.meta.*
(#26611 )
typescript.shim
JSDoc (#26626 )
Sortie le 18 mars 2024
3.11.1 is a patch release addressing regressions in v3.11.0.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
ofetch
in typescript.hoist
defaults (#26316 )
tsx
parser (#26314 )
finish
types and add to docs (0d9c63b82 )
undefined
name when resolving trailing slash (#26358 )
usePreviewMode
(#26303 )
useId
must be used with single root element (401370b3a )
<DevOnly>
component in api section (#26029 )
@nuxt/schema
should be used by module authors (#26190 )
routeNameSplitter
example in migration docs (#25838 )
Sortie le 17 mars 2024
This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨
When developing a Nuxt application and using console.log
in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!
Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. Asynchronous context is used to track and associate these logs with the request that triggered them. (#25936 ).
For example, this code:
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
will now log to your browser console when you refresh the page:
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.
We've also added a dev:ssr-logs
hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.
If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
A new usePreviewMode
composable aims to make it simple to use preview mode in your Nuxt app.
const { enabled, state } = usePreviewMode()
When preview mode is enabled, all your data fetching composables, like useAsyncData
and useFetch
will rerun, meaning any cached data in the payload will be bypassed.
We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment.
routeRules
It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) (#25841 ).
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// or appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// You can 'turn off' middleware that would otherwise run for a page
appMiddleware: {
auth: false
}
},
},
})
clear
data fetching utility Now, useAsyncData
and useFetch
expose a clear
utility. This is a function that can be used to set data
to undefined, set error
to null
, set pending
to false
, set status
to idle
, and mark any currently pending requests as cancelled. (#26259 )
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
#teleports
target Nuxt now includes a new <div id="teleports"></div>
element in your app within your <body>
tag. It supports server-side teleports, meaning you can do this safely on the server:
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
It's now possible to set custom timings for hiding the loading indicator, and forcing the finish()
method if needed (#25932 ).
There's also a new page:view-transition:start
hook for hooking into the View Transitions API (#26045 ) if you have that feature enabled.
This release sees server- and client-only pages land in Nuxt! You can now add a .server.vue
or .client.vue
suffix to a page to get automatic handling of it.
Client-only pages will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in <ClientOnly>
. Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using <ClientOnly>
with a fallback
slot to render a skeleton loader (#25037 ).
⚗️ Server-only pages are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading (#24954 ).
When you are using server components, you can now use the nuxt-client
attribute anywhere within your tree (#25479 ).
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
You can listen to an @error
event from server components that will be triggered if there is any issue loading the component (#25798 ).
Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers (#26223 ).
!WARNING
Server components remain experimental and their API may change, so be careful before depending on implementation details.
We've shipped a number of performance improvements, including only updating changed virtual templates (#26250 ), using a 'layered' prerender cache (#26104 ) that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.
We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your public/
directory or your layer directories are now resolved entirely by Nuxt (#26163 ), so if you have added nitro.publicAssets
directories with a custom prefix, these will now work.
We have changed the default _nuxt/[name].[hash].js
file name pattern for your JS chunks. Now, we default to _nuxt/[hash].js
. This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. (#26203 )
You can easily configure this to revert to previous behaviour if you wish:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
Previously users with shamefully-hoist=false
may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.
We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested (#26158 ).
There are a whole raft of other type fixes, including some regarding import types (#26218 and #25965 ) and module typings (#25548 ).
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
nuxt-client
in all components (#25479 )
page:view-transition:start
hook (#26045 )
finish()
(#25932 )
<NuxtIsland>
can't fetch island (#25798 )
usePreviewMode
composable (#21705 )
#teleports
element for ssr teleports (#25043 )
typescript.hoist
(85166cced )
getCachedData
(#26287 )
nuxtMiddleware
route rule (#25841 )
clear
utility to useAsyncData
/useFetch
(#26259 )
isPrerendered
in dev for server page (#26061 )
.config/nuxt.config
(5440ecece )
.config/nuxt.*
(7815aa534 )
error
in showError
/createError
with h3 (#25945 )
useId
(#25969 )
vueCompilerOptions
property to tsConfig
(#25924 )
useRuntimeConfig
in Nuxt renderer (#26058 )
typescript.shim
in favour of volar (#26052 )
defu
/h3
paths in type templates (#26085 )
toExports
from unimport
(#26086 )
AsyncDataRequestStatus
type (#26023 )
<html>
and <body>
attrs (#26027 )
node_modules
for modulesDir
(#25548 )
routeRules
(#26120 )
cookieRef
values deeply (#26151 )
ssrRender
(#26162 )
ssr: false
(f080c426a )
baseUrl
within server components (#25727 )
useNuxtData
(#22277 )
publicAssetsURL
(9d08cdfd1 )
buildAssetsDir
(81933dfc3 )
joinRelativeURL
for build assets (#26282 )
deep
to selectiveClient
(357f8db41 )
consola
for now (adbd53a25 )
window
access more carefully (977377777 )
request
computation (#26191 )
nuxtMiddleware
to appMiddleware
(cac745470 )
useId
composable was introduced (#25953 )
domEnvironment
option to testing example (#25972 )
fallback
prop for <NuxtLayout>
(#26091 )
vue-tsc
(#26083 )
macros.pageMeta
and typescript.esbuild
option (#26136 )
definePageMeta
page (#26139 )
app:manifest:update
hook (#26192 )
zhead
(e889a7df5 )
clear
(24217a992 )
appMiddleware
docs (da8e8eba8 )
scrollY
(#26298 )
networkidle
(9b5bffbbb )
Sortie le 22 février 2024
3.10.3 is a regularly-scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the vue and unjs ecosystems.
dedupe
option in useFetch
(#25815 )
css
files with ?inline
query (#25822 )
external
to navigate
in custom <NuxtLink>
(#25887 )
@__PURE__
(#25842 )
setTimeout
before scrolling when navigating (#25817 )
head
in defineNuxtComponent
(#25410 )
undefined
paths in resolveTrailingSlashBehavior
(ba6a4132b )
to.name
to be undefined rather than deleting entirely (4ca1ab7cf )
.ts
extension when adding compiled files (#25855 )
callout
to new components (#25897 )
nuxt.config
to enable pages for docs typecheck (72a2e23cc )
Sortie le 14 février 2024
3.10.2 is a regularly-scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the vue and unjs ecosystems.
refreshCookie
(#25635 )
.pcss
extension as a CSS extension (#25673 )
<ClientOnly>
(#25714 )
baseURL
on server useRequestURL
(#25765 )
rootDir
, not process.cwd
, for modulesDir
(#25766 )
useId
if attrs were not rendered (#25770 )
useAsyncData
docs (#25644 )
addComponentsDir
(#25683 )
event
to useRuntimeConfig
(#25788 )
Sortie le 5 février 2024
3.10.1 is a regularly-scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the vue and unjs ecosystems.
refresh
functions (#25568 )
useId
type signature (#25614 )
$
from generated id in useId
(#25615 )
rel
for same-site external links (#25600 )
inheritAttrs: false
when using useId
(#25616 )
NuxtLink
types (#25599 )
<NuxtLink>
defaults in nuxt config (#25610 )
pathe
in internal tests (e33cec958 )
nuxt
-> nuxtApp
internally for consistency (c5d5932f5 )
Sortie le 30 janvier 2024
3.10.0 is the next minor/feature release.
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights.
asyncData
when prerendering When prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manually in Nuxt 3 - see this article ).
With #24894 , we are now able to do this automatically for you when prerendering. Your useAsyncData
and useFetch
calls will be deduplicated and cached between renders of your site.
export defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
!IMPORTANT
It is particularly important to make sure that any unique key of your data is always resolvable to the same data. For example, if you are usinguseAsyncData
to fetch data related to a particular page, you should provide a key that uniquely matches that data. (useFetch
should do this automatically.)
👉 See full documentation .
We now ship a useId
composable for generating SSR-safe unique IDs (#23368 ). This allows creating more accessible interfaces in your app. For example:
<script setup>
const emailId = useId()
const passwordId = useId()
</script>
<template>
<form>
<label :for="emailId">Email</label>
<input
:id="emailId"
name="email"
type="email"
>
<label :for="passwordId">Password</label>
<input
:id="passwordId"
name="password"
type="password"
>
</form>
</template>
app/router.options
It's now possible for module authors to inject their own router.options
files (#24922 ). The new pages:routerOptions
hook allows module authors to do things like add custom scrollBehavior
or add runtime augmenting of routes.
👉 See full documentation .
We now support (experimentally) polyfilling key Node.js built-ins (#25028 ), just as we already do via Nitro on the server when deploying to non-Node environments.
That means that, within your client-side code, you can import directly from Node built-ins (node:
and node imports are supported). However, nothing is globally injected for you, to avoid increasing your bundle size unnecessarily. You can either import them where needed.
import { Buffer } from 'node:buffer'
import process from 'node:process'
Or provide your own polyfill, for example, inside a Nuxt plugin.
// ~/plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'
globalThis.Buffer = Buffer
globalThis.process = process
export default defineNuxtPlugin({})
This should make life easier for users who are working with libraries without proper browser support. However, because of the risk in increasing your bundle unnecessarily, we would strongly urge users to choose other alternatives if at all possible.
We now allow you to opt-in to using the CookieStore . If browser support is present, this will then be used instead of a BroadcastChannel to update useCookie
values reactively when the cookies are updated (#25198 ).
This also comes paired with a new composable, refreshCookie
which allows manually refreshing cookie values, such as after performing a request. See full documentation .
In this release, we've also shipped a range of features to detect potential bugs and performance problems.
setInterval
is used on server (#25259 ).
<NuxtPage />
but have the vue-router
integration enabled (#25490 ). (<RouterView />
should not be used on its own.)
It's now possible to control view transitions support on a per-page basis, using definePageMeta
(#25264 ).
You need to have experimental view transitions support enabled first:
export default defineNuxtConfig({
experimental: {
viewTransition: true
},
app: {
// you can disable them globally if necessary (they are enabled by default)
viewTransition: false
}
})
And you can opt in/out granularly:
// ~/pages/index.vue
<script setup lang="ts">
definePageMeta({
viewTransition: false
})
</script>
Finally, Nuxt will not apply View Transitions if the user's browser matches prefers-reduced-motion: reduce
(#22292 ). You can set viewTransition: 'always'
; it will then be up to you to respect the user's preference.
It's now possible to access routing metadata defined in definePageMeta
at build-time, allowing modules and hooks to modify and change these values (#25210 ).
export default defineNuxtConfig({
experimental: {
scanPageMeta: true
}
})
Please, experiment with this and let us know how it works for you. We hope to improve performance and enable this by default in a future release so modules like @nuxtjs/i18n
and others can provide a deeper integration with routing options set in definePageMeta
.
With #24837 , we are now opting in to the TypeScript bundler
resolution which should more closely resemble the actual way that we resolve subpath imports for modules in Nuxt projects.
'Bundler' module resolution is recommended by Vue and by Vite , but unfortunately there are still many packages that do not have the correct entries in their package.json
.
As part of this, we opened 85 PRs across the ecosystem to test switching the default, and identified and fixed some issues.
If you need to switch off this behaviour, you can do so. However, please consider raising an issue (feel free to tag me in it) in the library or module's repo so it can be resolved at source.
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: false
}
})
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
-->
tryUseNuxtApp
composable (#25031 )
bundler
module resolution (#24837 )
pages:routerOptions
hook (#24922 )
setInterval
is used on server (#25259 )
refreshCookie
+ experimental CookieStore support (#25198 )
useId
composable (#23368 )
endsWith
when checking for whitespace (#24746 )
prefers-reduced-motion
(#22292 )
fallback
in island response (#25296 )
defineModel
option as it is now stable (#25306 )
hidden
sourcemap values to vite (#25329 )
dedupe
(#25334 )
instance.attrs
in client-only components (#25381 )
callOnce
callbacks (#25431 )
nuxt-client
within template code (#25464 )
dependsOn
(#25409 )
NuxtError
(#25398 )
vue-router
warning with routeRule redirect (#25391 )
useRequestEvent
(#25480 )
useRuntimeConfig
signatures (#25440 )
pages:routerOptions
hook (#25509 )
currentRoute
non-ref warning (#25337 )
@since
annotations to exported composables (#25086 )
useAsyncData
explanation (#25392 )
error.vue
(#25320 )
error.vue
(#25396 )
.cjs
extension for ecosystem.config
(#25459 )
routeRules
example of swr/isr (#25436 )
sharedPrerenderData
(b0f50bec1 )
pages:routerOptions
(46b533671 )
NuxtPage
is not used when pages enabled (#25490 )
data-island-uid
replacement (#25346 )
$fetch
(a1fb399eb )
Sortie le 17 janvier 2024
3.9.3 is a hotfix release to address a regression with CSS in development
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the vue and unjs ecosystems.
data-island-uid
for island children (#25245 )
Sortie le 28 juin 2024
mkdirp
(f67056b9e )
Sortie le 27 juin 2024
memfs
(#27652 )
sessionStorage
(#27662 )
Sortie le 14 juin 2024
serve-static
types to v1.15.7 (1c44c376d )
html-minifier-terser
(#26914 )
@nuxt/config
(c283cc039 )
page
in e2e tests (1700aa131 )
dev
(2a5d05257 )