You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.
Discover all the release notes for the Nuxt framework
Released on July 18, 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 )
Released on July 2, 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 )
Released on June 16, 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 )
Released on June 11, 2024
3.12.1 is a hotfix release to address a typo in the nuxt/script stub auto-imports.
@nuxt/scripts
(0252000d7 )
CompatibilityDateSpec
(#27521 )
Released on June 11, 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 )
Released on April 4, 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 )
Released on March 18, 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 )
Released on March 17, 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 )
Released on February 22, 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 )
Released on February 14, 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 )
Released on February 5, 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 )
Released on January 30, 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 )
Released on January 17, 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 )
Released on January 16, 2024
3.9.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.
Object.fromEntries
(#24953 )
options
in addTemplate
(#25109 )
pages/
files in en-US
locale (#25195 )
nextTick
(#25197 )
data-island-component
(#25232 )
<NuxtPage>
rather than <RouterView>
(#25106 )
@nuxt/bridge-edge
(3f09ddc31 )
--log-level
description (#25211 )
immediate: false
in the appropriate example (#25224 )
.global.vue
filename for global components (#25144 )
lagon
from deployment providers (#24955 )
definePageMeta
(#25073 )
addDevServerHandler
API (#25233 )
nuxi
for bridge (637f5622d )
v3
branch sandbox in issue template (#25174 )
Released on January 5, 2024
3.9.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.
useRequestHeaders
(#24853 )
startsWith
to array access (#24744 )
NuxtErrorBoundary
with ssr: false
(#24896 )
any
in inferred injections (#25010 )
<ClientOnly>
(#25009 )
currentRoute
in Ref
(#25026 )
nuxt-config-schema
(#25067 )
features
/future
docs (f5676fba5 )
vue-router
docs link (#24948 )
readValidatedBody
and getValidatedQuery
(#24990 )
getValidatedRouterParams
(#25057 )
Released on December 25, 2023
3.9.0 is the next minor release.
A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄
We have lots of features packed into v3.9.0 and can't wait for you to try them out.
This release comes with Vite 5 and Rollup 4 support. Module authors may need to check to ensure that any vite plugins you're creating are compatible with these latest releases.
This comes with a whole host of great improvements and bug fixes - check out the Vite changelog for more info.
This release is tested with the latest Vue 3.4 release candidate, and has the necessary configuration to take advantage of new features in Vue 3.4 , including debugging hydration errors in production (just set debug: true
) in your Nuxt config.
👉 To take advantage, just update your vue
version once v3.4 is released, or try out the release candidate today:
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
This is a highly-experimental update, but it's now possible to play around with interactive components within Nuxt server components. You'll need to enable this new feature additionally to component islands:
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})
Now, within a server component, you can specify components to hydrate by using the nuxt-client
directive:
<NuxtLink :to="/" nuxt-client />
We're pretty excited about this one - so do let us know how you're using it! 🙏
We now use Vite's new AST-aware 'define' to perform more accurate replacements on server-side code, meaning code like this will no longer throw an error:
<script setup lang="ts">
if (document) {
console.log(document.querySelector('div'))
}
</script>
This hasn't been possible until now because we haven't wanted to run the risk of accidentally replacing normal words like document
within non-JS parts of your apps. But Vite's new define
functionality is powered by esbuild
and is syntax-aware, so we feel confident in enabling this functionality. Nevertheless, you can opt out if you need to:
export default defineNuxtConfig({
hooks: {
'vite:extendConfig' (config) {
delete config.define!.document
}
}
})
We now have a new hook-based system for <NuxtLoadingIndicator>
, including a useLoadingIndicator
composable that lets you control/stop/start the loading state. You can also hook into page:loading:start
and page:loading:end
if you prefer.
You can read more in the docs and in the original PR (#24010 ).
callOnce
Sometimes you only want to run code once, no matter how many times you load a page - and you don't want to run it again on the client if it ran on the server.
For this, we have a new utility: callOnce
(#24787 ).
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
Note that this utility is context-aware so it must be called in component setup function or Nuxt plugin, as with other Nuxt composables.
For a while now, errors returned by useAsyncData
and useFetch
have been typed pretty generically as Error
. We've significantly improved the type possibilities for them to make them more accurate in terms of what you'll actually receive. (We normalise errors with the h3
createError
utility under the hood, so they can be serialised from server to client, for example.)
We've tried to implement the type change in a backwards compatible way, but you might notice that you need to update the generic if you're manually configuring the generics for these composables. See (#24396 ) for more information, and do let us know if you experience any issues.
We've taken some time in this release to make some minor performance improvements, so you should notice some things are a bit faster. This is an ongoing project and we have ideas for improving initial load time of the Nuxt dev server.
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.
<NuxtLayout>
(#24116 )
addComponentsDir
(#24309 )
useCookie
(#24503 )
error.data
when throwing 404 errors (#24674 )
/module
or /nuxt
module subpath if it exists (#24707 )
refresh
on islands and server components (#24261 )
dedupe
option for data fetching composables (#24564 )
undefined
on server (#24711 )
addServerScanDir
composable (#24001 )
setup
within defineComponent
options (#24515 )
useRequestHeader
utility (#24781 )
callOnce
util to allow running code only once (#24787 )
NuxtIsland
(#22649 )
bundler
module resolution (#22821 )
toArray
util (#24857 )
resolve
operation (#24736 )
join
operation (#24717 )
get
operations (#24734 )
useRuntimeConfig
call (#24843 )
JSON.stringify
operation (#24848 )
import.d.ts
(#24413 )
reactivityTransform
(vue 3.4) (#24477 )
<DevOnly>
(#24511 )
isBuiltin
polyfill for greater node support (#24512 )
<NuxtLayout>
usage in islands (#24529 )
error
in useAsyncData
has correct type (#24396 )
appManifest
middleware after modules run (#24786 )
setup
within defineComponent
(#24784 )
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__
(#24836 )
mode
from filePath
for addComponent
(#24835 )
bundler
module resolution due to lack of support (22ce98d61 )
~/modules
dirs to modulesDir
(#24457 )
defineComponent
to infer prop types for router-link stub (dc0e8347b )
jiti.import
for schema (#24526 )
process.*
usage in nuxt vue app (#24749 )
future
and features
namespace (#24880 )
typedPages
(#24436 )
defineNuxtConfig
to deployment example (#24451 )
~
to @
alias in examples (#24574 )
-o
option to --open
(#24644 )
<NuxtPage>
(#24675 )
getCachedData
option (#24697 )
addServerScanDir
example (7cd02e290 )
loadNuxt
options (#24201 )
nuxi module
(#24790 )
useFetch
and useAsyncData
#24407 (#24775 , #24407 )
addComponentsDir
example to modules author guide (#24876 )
dev:prepare
instead of build:stub
(802b3e28c )
nuxt/bridge
when composables change (#24752 )
Released on November 20, 2023
3.8.2 is a patch release focusing on bug fixes
3.8.2 is a patch release and we've deferred some exciting features in our next release (3.9.0, expected in December) but it does bring a significant Nitro minor release: v2.8.0 . It's well worth checking out the release notes.
👉 Note that as Nitro has updated to rollup v4, but as Nuxt's vite dependency is still on rollup v3 until v3.9, you may experience type mismatches in modules or your projects if you are dependent on particular rollup plugins or plugin types.
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.
transformAssetUrls
(#24173 )
createError
(#24093 )
plugins.d.ts
if they will be written (#23943 )
typeof
optimisations (#23903 )
KeepAlive
cache (#24024 )
runtimeConfig
type hints (#23696 )
useFetch
key (#24307 )
useFetch
key from headers (#23462 , #24333 )
ignoreOptions
(#24337 )
useFetch
(#24364 )
useCookie
timeout (#24253 )
app:error
(#24376 )
import.meta
(#24186 )
.nuxtrc
in nuxt/starter
(56147b4a8 )
defineNuxtPlugin
syntax in bridge migration (#23036 )
nuxt3-vuex-module
in migration guide (#24260 )
.gitignore
in directory structure (#24338 )
app.config
placement with custom srcDir
(#24252 )
<ContentDoc>
in example (#24244 )
@nuxt/kit-nightly
in example (bdedc3207 )
nuxi-edge
to nuxi-nightly
(#24347 )
@nuxt/test-utils
to separate repo (#24146 )
repository
fields in package.json
(54529c17d )
package.json
s (#24189 )
@nuxt/eslint-config
(#24209 )
Released on November 6, 2023
3.8.1 is a patch release focused on bug fixes and performance improvements.
pages
on nuxt app and deduplicate calls (#24032 )
extends
(#23795 )
target: blank
links with base (#23751 )
std-env
to detect whether app is being tested (#23830 )
.json
extension for server components (#23802 )
@unhead/vue
in template code (#23858 )
baseURL
(#23884 )
cloneDeep
again (#23888 )
$fetch
at entry start (#23906 )
postcss-url
and duplicate postcss-import
(#23861 )
useCookie
value when it expires (#23549 )
h3
cors handler for vite routes only (#23995 )
addServerImportsDir
implementation (#24000 )
isChangingPage
util in scrollBehavior (#24091 )
useCookie
(#24043 )
ClientFallback
(#24086 )
typeCheck
plugin (#24114 )
useRequestEvent()
internally (#23916 )
useFetch
key generation logic (#24082 )
addPrerenderRoutes
name (#24102 )
NuxtIsland
(#23801 )
Released on October 19, 2023
We have a lot of exciting features in v3.8, and can't wait for you to try it out.
Just to remind you, we're now using the new Nuxt CLI which is now versioned separately. There are some exciting improvements there to follow, so do check out the latest releases. (For example, we now share the same port with the Vite websocket, meaning better support for docker containers in development.)
Nuxt DevTools v1.0.0 is out and we now think it's ready to be shipped as a direct dependency of Nuxt.
👉 You can check out the release notes for more information - and stay tuned for an article detailing our roadmap for the future.
We've now made <NuxtImg>
and <NuxtPicture>
first-class built-in components, documenting them and auto-installing @nuxt/image
the first time that they are used (#23717 ).
https://github.com/nuxt/nuxt/assets/28706372/597c9307-5741-4d9c-8eab-aad5bfef2ef2
We would definitely advise using @nuxt/image
if you're using images in your site; it can apply optimisations to make your site more performant.
🚨 This is a behaviour change so do take care with this one: 🚨
We now support scanning layouts within subfolders in ~/layouts
in the same way as we do with ~/components
.
File | Layout name |
---|---|
~/layouts/desktop/default.vue | 'desktop-default' |
~/layouts/desktop-base/base.vue | 'desktop-base' |
~/layouts/desktop/index.vue | 'desktop' |
See #20190 for more information
We now support a built-in app manifest (see #21641 ), which generates a manifest at /_nuxt/builds/meta/<buildId>.json
.
Initially this enables loading payloads only for prerendered routes, if a site is static (preventing 404s). It also enables client-side route rules. To begin with, only redirect
route rules will have an effect; they will now redirect when performing client-side navigation. (More coming soon...!)
The app manifest also enables future enhancements including detection of outdated deployments by checking /_nuxt/builds/latest.json
.
You can switch off this behaviour if you need to (but do let us know if you have any issues):
export default defineNuxtConfig({
experimental: {
appManifest: false
}
})
We now define a 'scope' for Nuxt composables executed in plugins (#23667 ), which allows running synchronous cleanup before navigating away from your site, using the Vue onScopeDispose
lifecycle method. This should fix an edge case with cookies (#23697 ) and also improves memory management, for example in Pinia stores (#23650 ). You can read more about Vue effect scopes .
We also now support native async context for the Vue composition API (#23526 ). In case you're unaware, we support native async context on Node and Bun, enabled with experimental.asyncContext
. This can help address issues with missing a Nuxt instance. But it didn't previously affect missing Vue instances.
If you experience issues with 'Nuxt instance unavailable', enabling this option may solve your issues, and once we have cross-runtime support we are likely to enable it by default.
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
We've supported defining your own NuxtLink
components with the defineNuxtLink
utility. We now support customising the options for the built-in <NuxtLink>
, directly in your nuxt.config
file (#23724 ). This can enable you to enforce trailing slash behaviour across your entire site, for example.
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
activeClass: 'nuxt-link-active',
trailingSlash: 'append'
}
}
}
})
We have two very significant new features for useAsyncData
and useFetch
:
deep: false
to prevent deep reactivity on the data
object returned from these composables (#23600 ). It should be a performance improvement if you are returning large arrays or objects. The object will still update when refetched; it just won't trigger reactive effects if you change a property deep within the data
.
getCachedData
option to handle custom caching for these composables (#20747 )
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
// this will not refetch if the key exists in the payload
getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
We also support configuring some default values for these composables in an app-wide way (#23725 ):
export default defineNuxtConfig({
experimental: {
defaults: {
useAsyncData: {
deep: false
},
useFetch: {
retry: false,
retryDelay: 100,
retryStatusCodes: [500],
timeout: 100
}
}
}
})
We now more carefully load layer plugins (#22889 and #23148 ) and middleware (#22925 and #23552 ) in the order of the layers, always loading your own plugins and middleware last. This should mean you can rely on utilities that layers may inject.
We've also added a test suite to cover these layer resolution changes.
And probably one of the most significant changes - if you are using remote layers we now clone these within your node_modules/
folder (#109 ) so layers can use dependencies with your project. See c12
release notes for full details.
Every commit to the main
branch of Nuxt is automatically deployed to a new release, for easier testing before releases. We've renamed this from the 'edge release channel' to the 'nightly release channel' to avoid confusion with edge deployments. And probably also with Microsoft Edge (though I haven't heard that anyone was confused with that one!)
➡️ nuxt3
is now nuxt-nightly
➡️ nuxi-edge
is now nuxi-nightly
➡️ @nuxt/kit-edge
is now @nuxt/kit-nightly
... and so on.
You can read more about how it works .
Nitro v2.7 has been released with lots of improvements and bug fixes - do check out the full changelog .
🔥 One of the most significant is that we now save ~40% of bundle size in production by using native fetch
(which is supported in Node 18+) (#1724 ). So if possible, we'd recommend you update your Node version to at least 18.
🚨 This is likely to need code changes in your project 🚨
Vue requires that type imports be explicit (so that the Vue compiler can correctly optimise and resolve type imports for props and so on). See core Vue tsconfig.json
.
We've therefore taken the decision to turn on verbatimModuleSyntax
by default in Nuxt projects, which will throw a type error if types are imported without an explicit type
import. To resolve it you will need to update your imports:
- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'
You may also encounter modules in the Nuxt ecosystem that need to be updated; please open an issue for those modules. I'm also very happy to help if you're encountering any problems with this, if you're a module author. Just tag me and I'll take a look.
If for whatever reason you need to undo this change in your project you can set the following configuration:
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
verbatimModuleSyntax: false
}
}
}
})
However, we'd recommend only doing that temporarily, as Vue does need this option to be set for best results.
As usual, our recommendation for upgrading is to run:
nuxi upgrade
addServerImports
and addServerImportsDir
(#23288 )
prerenderRoutes
ssr composable (#22863 )
appManifest
by default (#23448 )
withAsyncContext
(#23526 )
-nightly
extension (#23508 )
@nuxt/devtools
as dependency and enable (#23576 )
deep: false
for data composables (#23600 )
@nuxt/image
when it is used (#23717 )
<NuxtLink>
options (#23724 )
asyncData
errors with null
(#23428 )
vue-router
(#23440 )
config.autoImport
in addServerImports
(#23472 )
clearNuxtState
called w/o keys (#23483 )
addPrerenderRoutes
name (#23509 )
test
/dev
as manifest buildId when appropriate (#23512 )
<DevOnly>
(#23466 )
useFetch
(#23693 )
lodash-es
+ simplify postcss resolution (#23692 )
useAsyncData
(#23351 )
prerenderedAt
to override app manifest (#23781 )
prerenderedAt
behaviour pending next patch (108b1bdf7 )
listhen
options on nuxi dev page (#23415 )
handler
for useAsyncData
(#23389 )
nitro
to use runtimeConfig
(#23454 )
bridge.typescript
option must be set. (#23503 )
nuxt kit
section (#22375 )
/edge-channel
page to /nightly-release-channel
(#23648 )
routeRules
example (818dc626c )
<NuxtImg>
and <NuxtPicture>
(#23741 )
Released on September 26, 2023
3.7.4 is a regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade
nuxt/*
exports (#23357 )
consola
and improve test dx (#23302 )
nuxt2
command (#23211 )
code-block
in migration guide (#23224 )
callHook
method (#23231 )
srcDir
JSDoc (#23250 )
nuxtApp.runWithContext
(#23258 )
devtools.nuxt.com
(#23350 )
await
to clarify sendRedirect
is async (#23345 )
tryUseNuxt
to kit context utils list (#23373 )
linkChecker
job to link-checker
(#23319 )
Released on September 13, 2023
3.7.3 is a hotfix release to address a regression introduced in 3.7.2.
#components
(#23188 )
Released on September 12, 2023
3.7.2 is a regularly scheduled patch release.
As usual, our recommendation for upgrading is to run:
nuxi upgrade
joinURL
with remote sources on NuxtIsland (#23093 )
data-v
attrs from server component props (#23095 )
useFetch
auto key (#23086 )
cssCodeSplit
(#23049 )
spaLoadingTemplate
if file exists (#23048 )
tsconfig.json
defaults (#23121 )
0
(#23127 )
name
param to PageMeta
interface description (#23107 )
experimental.componentIslands
(#23138 )
nuxi init
command (#23155 )
Released on September 5, 2023
3.7.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 unjs ecosystem.
ssr: false
(#22869 )
priority
when registering components dirs (#22882 )
addLayout
(#22902 )
true
(#22905 )
write: false
for type templates (#22972 )
shouldExternalize
(#22991 )
destr
in more places over JSON.parse
(#22997 )
<NuxtPage>
(#22912 )
pageKey
(#22920 )
env
object for nuxt plugins (#22963 )
NuxtLayout
(#22989 )
GITHUB_REF_NAME
to get branch for release (d49ea58de )
Released on August 25, 2023
We've refactored nuxi
using unjs/citty and this marks the first Nuxt release that depends on the new version, safely in its own repository. We have grand plans for this - check out some of the features + roadmap discussions in nuxt/cli and please feel free to contribute!
Nuxi is now decoupled from the main nuxt
version - we plan to iterate and release nuxi more quickly in future so you can expect new things coming soon!
Response
With improvements in unjs/h3 and unjs/nitro , it's now possible to directly return a Response
object from server routes, meaning it's also possible to return and handle streams natively in Nuxt.
👉 Check out the full detail in the unjs/h3 and unjs/nitro release notes.
This release comes with a couple of improvements in rendering HTML responses from the server. We now determine whether to preload/prefetch resources at build time (so you can customise this in the build:manifest
hook). We also now manage rendering the HTML for them directly in unhead
(#22179 ), which means you can configure the order for <link>
, <meta>
, <script>
, <style>
, and more. And - in our preliminary testing - it's even faster!
It's possible to opt-in to upcoming head improvements with the experimental.headNext
flag. This currently includes a new ordering algorithm based on capo.js (#22431 ) and allows enabling future optimisations as they are released in unhead
:
export default defineNuxtConfig({
experimental: {
headNext: true
}
})
We'd love your thoughts - you can respond with any issues/feedback in this discussion .
In your Nuxt config you can now use $client
and $server
shortcuts to easily define configuration that is specific to just the Vite client/server (#22302 ) or webpack client/server (#22304 ) builds. This previously was only possible with the vite:extendConfig
and webpack:config
hooks.
For example:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[hash].js',
assetFileNames: '_nuxt/[hash][extname]',
entryFileNames: '_nuxt/[hash].js'
}
}
}
}
}
})
We've chosen to unpin Vite from minor versions, meaning whenever Vite releases a new feature version you can opt-in straight away. Vite 4.4 brings a lot of exciting things, including experimental Lightning CSS support - and much more!
👉 Check out the Vite release notes for more.
We now use purely relative paths in the generated tsconfig.json
instead of setting a baseUrl
. This means better support for dev environments like docker images where the absolute path may not match your IDE (#22410 ).
We also set a couple of additional compiler flag defaults to match Vite/TS recommendations (#22468 ).
Plus, you should now get type hinted access to layouts in setPageLayout
and also in <NuxtLayout name>
(#22363 ).
If you've ever got an issue with 'Nuxt context unavailable' this might be one for you. We now support native async context for Bun and Node under an experimental flag, in both Nuxt and Nitro (#20918 ).
This enables using Nuxt composables on the server without needing to ensure they are being called directly in a setup function. It also allows the same in Nitro, with a new useEvent()
utility that is usable in server routes.
To try it out, you can enable experimental.asyncContext
:
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
We've fixed a couple of issues with watchers, meaning that you should need to restart your server less often - and you should see a significant performance increase if you are using layers.
There lots more exciting features coming directly from Nitro 2.6, including smaller, lighter servers and new persistent data storage in a .data
directory.
👉 Read more in the full release article .
As usual, our recommendation for upgrading is to run:
npx 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.
$client
and $server
vite env overrides (#22302 )
$client
and $server
overrides (#22304 )
scrollToTop
page meta (#21741 )
app:templatesGenerated
hook (#21935 )
unhead
(#22179 )
@nuxt/webpack-builder
when needed (#21747 )
writeTypes
utility (#22385 )
setPageLayout
/<NuxtLayout>
(#22362 )
import.meta.*
build flags (#22428 )
node_modules
(#22478 )
webpack
/nitro
/postcss
config (#22521 )
global: 'sync'
components (#22558 )
app.rootId
optional (#22528 )
experimental.headNext
unhead integration (#22620 )
bun
package manager (#22673 )
routeRules
defined within pages (#20391 )
hidden
sourcemaps (#22787 )
nuxt/cli
(#22799 )
./schema/config.schema.json
subpath (#22813 )
nuxt/config
(#22391 )
capo.js
head tag order (#22431 )
.toLowerCase()
(#22743 )
prerender:routes
hook (#22247 )
scrollBehaviorType
(#22264 )
asyncData
generic + default (#22258 )
createClientOnly
render function to ctx (#22289 )
build.extend
(#22305 )
validate
return typing to be either error or boolean (#22323 )
hasNuxtModule
(#22316 )
builder:watch
(#22333 )
useFetch
hash (#22378 )
watch
paths against all layer srcDir
s (#22307 )
name
is an optional prop for <NuxtLayout>
(0d9a0b753 )
useFetch
(#22418 )
baseUrl
and use relative paths in tsconfig (#22410 )
injectHead
usage (#22447 )
useCookie
(#22474 )
internal:nuxt
namespace (9b0d371b0 )
normalize
call (14bf2b02f )
webpack
options should be optional (#22524 )
app.config.ts
files (#22494 )
hookable
to externals list (4552d39c4 )
app.{rootId ([rootTag}
(#22543 )](https://github.com/nuxt/nuxt/commit/rootTag}` (#22543 )))
import.meta
build vars in define
as well (#22576 )
page:finish
(#22566 )
distDir
after first build (#22614 )
''
key for root scope in variable collector (#22679 )
exclude
paths to nitro tsconfig.server.json
(#22768 )
asyncData
when immediate
is disabled (#20980 )
spaLoadingTemplate
to false
(#22798 )
unctx
where possible (#22811 )
nuxi-ng
for edge releases (#22413 )
useNitroApp
from subpath (#22785 )
#components
import for dynamic component (#22231 )
.env
section (#22369 )
NuxtIsland
(#22434 )
]
in code-block filenames (#22389 )
scrollToTop
(#22503 )
status
type for useAsyncData
(#22511 )
useSeoMeta
parameters (#22513 )
pick
(#22531 )
ReadMore
components (#22541 )
addServerHandler
example to modules author guide (#22603 )
server: false
doesn't await on initial load (#22619 )
import.meta.*
update until v3.7 release (98c17e5d4 )
NuxtIsland
in server only components docs (#22685 )
useFetch
docs (#22755 )
useAsyncData
(#22760 )
nuxi
(df2bc8a72 )
.eslintignore
file with 'ignorePatterns' (#22547 )
h3-nightly
on edge releases (#22593 )
networkidle
dependency (#22596 )
Released on July 19, 2023
3.6.5 is a hotfix patch release addressing the regression with nuxt/content introduced in v3.6.4.
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.
dist
from the default ignore list (#22227 )
Released on June 28, 2024
mkdirp
(f67056b9e )
Released on June 27, 2024
memfs
(#27652 )
sessionStorage
(#27662 )
Released on June 14, 2024
serve-static
types to v1.15.7 (1c44c376d )
html-minifier-terser
(#26914 )
@nuxt/config
(c283cc039 )
page
in e2e tests (1700aa131 )
dev
(2a5d05257 )
Released on January 12, 2024
2.17.3 is the next patch release for the 2.x branch.
hookable
package (#24426 )
npm pkg fix
(4d0474c4b )
Released on October 24, 2023
webpack
has it in core (#23703 )