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 13 septembre 2023
3.7.3 is a hotfix release to address a regression introduced in 3.7.2.
#components
(#23188 )
Sortie le 12 septembre 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 )
Sortie le 5 septembre 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 )
Sortie le 25 août 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 )
Sortie le 19 juillet 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 )
Sortie le 19 juillet 2023
3.6.4 is a patch release, brought forward to allow releasing some important bug fixes before work begins on 3.7.
Warning We're currently investigating a regression with nuxt/content and will be releasing 3.6.5 later today.
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.
buildDir
and node_modules
(#22214 )
toLowerCase
for possible moduleResolution
(#22160 )
baseURL
to island fetch requests (#22009 )
--inspect
in dev mode (#22205 )
Sortie le 14 juillet 2023
3.6.3 is the next patch release, including a number of fixes. It's anticipated this will be the last patch release before 3.7.
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.
unctx
options (4e32e70bb )
isExternal
(#21966 )
experimental
option (0643d4315 )
bundler
module resolution flag (#22142 )
/
(#22118 )
Sortie le 5 juillet 2023
3.6.2 is the next patch release, with a raft of fixes including preparations for use without
--shamefully-hoist
and some fixes for data fetching within nested layouts/pages.
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/ui-templates
from modulesDir
(#21836 )
nuxi generate
(#21860 )
tsconfig.json
scope (#21917 )
typedPages
(#21659 )
node_modules
to tsconfig include (#21929 )
$fetch.raw
in dev client mode for islands (#21904 )
vite.publicDir
(#21847 )
spaLoadingTemplate
link (#21845 )
<NuxtLoadingIndicator>
(#21952 )
nuxt-vitest
and composable unit tests (#21884 )
Sortie le 26 juin 2023
3.6.1 is a bugfix/patch release with some significant patches merged since 3.6.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.
typescript
dep (#21729 )
false
to disable spa loading template (#21739 )
path
from SPA payload (#21732 )
ssr: false
route rule (#21763 )
#imports
(#21796 )
defineNuxtRouteMiddleware
migration (#21718 )
Sortie le 23 juin 2023
3.6.0 is the next minor release, packed with improvements and bug fixes.
In the coming week you can expect two announcements:
nuxt/cli
by @pi0 - a new, drop-in replacement for nuxi
featuring more extensibility and better DX. We are aiming to release this alongside Nuxt 3.7, but you would be very welcome to test and contribute to nuxi-ng
before then!
This minor release contains quite a lot, and we have big plans
If your site is served with ssr: false
or you have disabled server-rendering on some of your pages, you might be particularly interested in the new built-in SPA loading indicator .
You can now place an HTML file in ~/app/spa-loading-template.html
with some HTML you would like to use to render a loading screen that will be rendered until your app is hydrated on these pages.
👉 By default an animated Nuxt icon is rendered. You can completely disable this indicator by setting spaLoadingTemplate: false
in your nuxt configuration file.
The first thing that happens when your app is hydrated is that your plugins run, and so we now perform build-time optimisations on your plugins , meaning they do not need to be normalised or reordered at runtime.
We also include your error component JS in your main entrypoint, meaning that if an error occurs when a user has no connectivity, you can still handle it with your ~/error.vue
. (This also should decrease your total bundle size.)
👉 Compared to Nuxt 3.5.3, the minimal client bundle has decreased by ~0.7kB. Let's keep this up!
It has been possible to use server components on static pages, but until now they would increase the payload size of your application. That is no longer true. We now store rendered server components as separate files, which are preloaded before navigation .
👉 This does rely on the new, richer JSON payload format, so make sure you have not disabled this by setting experimental.renderJsonPayloads
to false.
If you're monitoring your metrics closely and have not turned off experimental.inlineSSRStyles
, you should see more CSS inlined in your page, and a significantly external CSS file. We're now better at deduplicating global CSS , particularly added by libraries like tailwind or unocss.
To give you more fine-grained control over your page/layout components, for example to create custom transitions with GSAP or other libraries, we now allow you to set pageRef
on <NuxtPage>
and layoutRef
on <NuxtLayout
. These will get passed through to the underlying DOM elements.
Up to now, running nuxt generate
produced the same output on every deployment provider, but with Nuxt 3.6 we now enable static provider presets automatically. That means if you are deploying a static build (produced with nuxt generate
) to a supported provider (currently vercel and netlify with cloudflare and github pages coming soon) we'll prerender your pages with special support for that provider.
This means we can configure any route rules (redirects/headers/etc) that do not require a server function. So you should get the best of both worlds when deploying a site that doesn't require runtime SSR. It also unblocks use of Nuxt Image on Vercel (with more potential for automatic provider integration coming soon).
We now have better support for server-specific #imports
and augmentations if you are using the new ~/server/tsconfig.json
we shipped in Nuxt 3.5. So when importing from #imports
in your server directory, you'll get IDE auto-completion for the right import locations in Nitro, and won't see Vue auto-imports like useFetch
that are unavailable within your server routes.
You should now also have type support for runtime Nitro hooks .
Finally, we have removed more locations where objects had a default any
type . This should improve type safety within Nuxt in a number of locations where unspecified types fell back to any:
RuntimeConfig
PageMeta
NuxtApp['payload']
(accessible now from NuxtPayload
interface)
ModuleMeta
You can find out more about how to update your code if this affects you in the original PR.
This release ships with new Nitro 2.5, which has a whole list of exciting improvements that are worth checking out.
Of particular note is experimental support for streaming, which is also enabled by a couple of changes in Nuxt itself.
This release brings a number of utilities for modules authors to easily add type templates and assert compatibility with a given version of another module.
In addition, this release will finally unlock a new nuxt/module-builder
mode that should improve type support for module authors. If you're a module author, you might consider following these migration steps to try it out in the coming days.
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.
useCookie
state between tabs (#20970 )
renderResult
to app:rendered
(#18610 )
esbuild-loader
options (#21436 )
open
option in navigateTo
helper (#21333 )
clearNuxtState
composable (#21409 )
addTypeTemplate
helper with auto-registration (#21331 )
status
from useAsyncData
(#21045 )
NuxtPage
ref via pageRef
(#19403 )
NuxtLayout
ref via layoutRef
(#19465 )
ssr-error
event (#21547 )
defineNuxtModule
(#20763 )
useNuxtApp
to window for convenience (#21636 )
resolveId
workaround and update vite-node (#21423 )
nitro.autoImport
option (#21485 )
dst
not src
(#21501 )
navigateTo
(#21500 )
window.location
(#21521 )
<Title>
(#21613 )
:
in rendered server components (for win) (#21645 )
baseUrl
in tsconfig.json
(#21632 )
BroadcastChannel
(#21653 )
@typescript-eslint/typescript-estree
(#21664 )
res.end()
calls with check if event is handled (#21665 )
redirect
type for NuxtPage
type (#21713 )
render
when defining rendering
(#21490 )
addTypeTemplate
typos (#21520 )
nuxt
with bridge if nitro
is false (#21586 )
parallel
option on plugins (#21622 )
examples/
from repository (#21538 )
@latest
to install commands (#21702 )
vitest
renovate group (7695aca93 )
octokit/request-action
(dd5955caf )
webpack-dev-middleware
updates on 2.x branch (7f7ae96d1 )
Sortie le 6 juin 2023
3.5.3 is expected to be the last patch release before our next raft of features lands in v3.6.
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.
--no-clear
config through to vite (#21262 )
vue-loader
options type (#21363 )
typeCheck
(#21064 )
std-env
in runtime code (#21372 )
lodash.template
from lodash-es
(#20892 )
index.vue
to page routing example (#21240 )
$fetch
and fetch composables (#21228 )
env
property to match runtimeConfig
(#21265 )
Sortie le 29 mai 2023
3.5.2 is a patch release focusing on bug fixes.
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.
.test
and hoist regexps where possible (#21011 )
@default
jsdoc tag (#21010 )
pages/
integration (397c54c9d )
<DevOnly>
with webpack (#21013 )
refreshNuxtData
(#21008 )
abortNavigation
(#21047 )
Set-Cookie
header if value is null (#21072 )
render:island
hook (#21065 )
Sortie le 21 mai 2023
3.5.1 is a patch release, with bug fixes and performance improvements.
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.
/
route (#20894 )
useFetch
method when generic is passed (#20797 )
refresh
when hydrating when data is present (#20916 )
default
type for initial value for composables (#20968 )
resolvePath
to handle edge cases for modules (#20975 )
pnpm test
command to run whole test suite (4907660ff )
experimental.renderJsonPayloads
(891ba880e )
useAsyncData
and useFetch
types (#20935 )
useState
(#20249 )
pages/
docs (#20976 )
Sortie le 16 mai 2023
3.5.0 is a minor (feature) release with lots of new features to play with.
Vue 3.3 has been released, with lots of exciting features, particularly around type support. This also brings a significant improvement to data fetching when navigating between nested pages (#20777 ), thanks to @antfu and @baiwusanyu-c .
defineOptions
macro
Read the full release announcement for more details.
We've been working on lots of improvements to Nitro and these have landed already in Nitro v2.4 - you may already have this upgrade, which contains a lot of bug fixes, updates to the module worker format for Cloudflare, Vercel KV support and more.
One note: if you're deploying to Vercel or Netlify and want to benefit from incremental static regeneration, you should now update your route rules:
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
Read the full release notes .
Rich JSON payload serialisation is now enabled by default (#19205 , #20770 ). This is both faster and allows serialising complex objects in the payload passed from the Nuxt server to client (and also when extracting payload data for prerendered sites).
This now means that various rich JS types are supported out-of-the-box: regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like ref
, reactive
, shallowRef
and shallowReactive
.
You can find an example in our test suite.
This is all possible due to Rich-Harris/devalue#58 . For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.
You can even register your own custom types with a new object-syntax Nuxt plugin:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
You can read more about how this works here .
This feature should be considered highly experimental, but thanks to some great work from @huang-julien we now support interactive content within server components via slots (#20284 ).
You can follow the server component roadmap at #19772 .
You can now configure fully typed, per-environment overrides in your nuxt.config
:
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
If you're authoring layers, you can also use the $meta
key to provide metadata that you or the consumers of your layer might use.
Read more: #20329 .
You can benefit from fully typed routing within your Nuxt app via this experimental integration with https://github.com/posva/unplugin-vue-router - thanks to some great work from @posva ! Out of the box, this will enable typed usage of navigateTo
, <NuxtLink>
, router.push()
and more. You can even get typed params within a page by using const route = useRoute('route-name')
.
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
We now have full support within Nuxt for the bundler
strategy of module resolution . We would recommend adopting this if possible. It has type support for subpath exports, for example, but more exactly matches the behaviour of build tools like Vite and Nuxt than Node16
resolution.
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
This turns on TypeScript's ability to 'follow' Node subpath exports. For example, if a library has a subpath export like mylib/path
that is mapped to mylib/dist/path.mjs
then the types for this can be pulled in from mylib/dist/path.d.ts
rather than requiring the library author to create mylib/path.d.ts
.
We plan to improve clarity within your IDE between the 'nitro' and 'vue' part of your app, and we've shipped the first part of this via a separate generated tsconfig.json
for your ~/server
directory (#20559 ). You can use by adding an additional ~/server/tsconfig.json
with the following content:
{
"extends": "../.nuxt/tsconfig.server.json"
}
Although right now these values won't be respected when type checking, you should get better type hints in your IDE.
Although we have not typed or documented the build.extend
hook from Nuxt 2, we have been calling it within the webpack builder. We are now explicitly deprecating this and will remove it in a future minor version.
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.
prepend
option to addImportsDir
(#20307 )
vite:configResolved
hook (#20411 )
webpack:configResolved
hook (#20412 )
addVitePlugin
and addWebpackPlugin
(#20525 )
nuxi analyze
from cli (#20387 )
nuxtApp.runWithContext
(#20608 )
typedPages
option (#20367 )
runWithContext
within callWithNuxt
(#20775 )
useRequestURL
helper (#20765 )
<DevOnly>
(#20817 )
addBuildPlugin
for builder-agnostic implementation (#20587 )
NuxtClientFallback
(#20336 )
@nuxt/devtools
module before core modules (#20595 )
<FragmentWrapper>
(#20607 )
useError
is called with nuxt app context (#20585 )
nuxt_component
ssr style and isVue
(#20679 )
build.extend
hook (#20605 )
fs.allow
dirs to include app files (#20755 )
.env
changes (#20501 )
<DevOnly>
from parsed html (#20840 )
pages:extend
to enable pages module (#20806 )
scrollBehavior
(#20859 )
runtimeCompiler
option out of experimental (#20606 )
resolvePath
(#20756 )
useCookie
does not share state (#20665 )
navigateTo
examples (#20678 )
useSeoMeta
and useServerSeoMeta
pages (#20656 )
<NuxtLayout>
when migrating error.vue
(#20690 )
await
before lazy composable examples (7e7e006e9 )
pinia
(#20778 )
markdownlint-cli
update and prevent auto-update (675445f98 )
@ts-ignore
(4f0d3d4ae )
.only
in tests (ad97cb45a )
.mjs
files (#20711 )
pnpm-workspace.yaml
(#20751 )
externalVue
removal (a33d2e7ae )
Sortie le 28 avril 2023
3.4.3 is a patch release with the latest bug fixes. 🐞 It is expected that the next release will be v3.5, in approximately two weeks' time.
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.
timeEnd
unless we're debugging (#20424 )
<ClientOnly>
(f1ded44e8 )
event.node.req
in cookie utility (#20474 )
devServer.https: true
(#20498 )
/__nuxt_error
directly (#20497 )
callAsync
for executing hooks with context (#20510 )
app:error
in SSR before rendering error page (#20511 )
asyncData
(#20535 )
#components
imports into direct component imports (#20547 )
RenderResponse
for redirects (#20496 )
vue-router
docs (#20454 )
nuxt-edge
with provenance (753c4c2a3 )
Sortie le 20 avril 2023
3.4.2 is a patch release with the latest bug fixes and performance improvements
Apart from the normal bug fixes, we have a couple things we should call out.
@parcel/watcher
for the Nuxt dev watcher (#20179 ). This may improve performance if you're on Windows. You'll probably also want to install watchman
in that case.
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.
@parcel/watcher
for dev watcher (#20179 )
useRequestHeaders
keys as optional (#20286 )
@jest/globals
(#20360 )
rootDir
when preparing project (#20401 )
isJS
and isVue
utilities consistently (#20344 )
isFileServingAllowed
util (#20414 )
@ts-ignore
and fix some issues (#20273 )
Sortie le 13 avril 2023
3.4.1 is a patch release. We've pulled it forward slightly to fix a couple of breaking bugs in 3.4.0.
ssrContext
in spa renderer (#20216 )
<NuxtClientFallback>
(#20237 )
vue-router
normalises url (#20247 )
transform
/pick
(#20186 )
Sortie le 11 avril 2023
3.4.0 is a minor (feature) release for Nuxt 3 bringing exciting new features, including support for the View Transitions API, transferring rich JavaScript payloads from server to client - and much more.
https://user-images.githubusercontent.com/904724/231222082-6bd4aeae-3026-407e-b3be-658df6305748.mp4
You can see a demo on https://nuxt-view-transitions.surge.sh
You may have noticed that Chromium-based browsers now ship a new web platform API: the View Transitions API . This is an exciting new ability for native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages.
Nuxt now ships with an experimental implementation, which will be under active development during the v3.4 release cycle. See the known issues in the linked PR .
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
We've merged a significant change to how Nuxt handles payloads (under an experimental flag). Payloads are used to send data from the server to the client when doing server-side rendering and avoid double data-fetching during the hydration phase.
export default defineNuxtConfig({
experimental: {
renderJsonPayloads: true
}
})
With this new option enabled, this now means that various rich JS types are supported out-of-the-box: regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like ref
, reactive
, shallowRef
and shallowReactive
.
You can find an example in our test suite.
This is all possible due to Rich-Harris/devalue#58 . For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.
You can even register your own custom types with a new object-syntax Nuxt plugin:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
You can read more about how this works here .
Note: this only affects payloads of the Nuxt app, that is, data stored within useState
, returned from useAsyncData
or manually injected via nuxtApp.payload
. It does not affect data fetched from Nitro server routes via $fetch
or useFetch
although this is one area I am keen to explore further.
Preliminary testing shows a significant speed-up: 25% faster in total server response time for a very minimal app with a large JSON payload, but I'd urge you to run your own tests and share the results with us.
As mentioned, we're merging this behind a flag so we can test this broadly and gather feedback on the new approach. The most significant potential change is that the payload is now no longer available on window.__NUXT__
immediately. Instead, we now need to initialise the Nuxt app to parse the payload so any code that accesses __NUXT__
will need to be run in a plugin or later in the Nuxt app lifecycle. Please feel free to raise an issue if you foresee or encounter issues in your projects.
We now support object-syntax Nuxt plugins for better control over plugin order and easier registration of hooks.
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // or 'post'
async setup (nuxtApp) {
// this is the equivalent of a normal functional plugin
},
hooks: {
// You can directly register Nuxt app hooks here
'app:created'() {
const nuxtApp = useNuxtApp()
//
}
}
})
In future we plan to enable build optimizations based on the metadata you pass in your Nuxt plugins.
It's even easier to enable Nuxt DevTools in your project: just set devtools: true
in your nuxt.config
file to enable devtools.
export default defineNuxtConfig({
devtools: true
})
If it's not already installed, Nuxt will prompt to install it locally. This means you no longer need to have Nuxt DevTools enabled globally.
Note: the DevTools is still experimental and under active development, so do be prepared for occasional unexpected behaviour, and please report issues directly to https://github.com/nuxt/devtools 🙏
We now support transforming ~
/~~
/@
/@@
aliases within layers , meaning you now no longer need to use relative paths when importing within layers.
This should mean it is much easier to use a 'normal' Nuxt project as a layer without needing to specially write it as one.
We now transform certain keys of definePageMeta
and defineNuxtComponent
which means you should have fewer issues with a missing Nuxt instance. This includes support accessing the Nuxt instance after an await
within asyncData
and setup
functions for those still using the Options API. And you no longer need to wrap middleware
and validate
with defineNuxtRouteMiddleware
when using async functions.
As usual, this release will pull in upstream improvements, including the new Consola v3 and Nitropack v2.3.3 (a new minor is expected shortly).
We've also taken the opportunity to do some cleanup in this minor release.
x-nuxt-no-ssr
header (undocumented) to force SPA rendering. We've now disabled this behaviour by default but you can get it back by setting experimental.respectNoSSRHeader
to true. Alternatively, you can set event.context.nuxt.noSSR
on the server to force SPA rendering.
#head
alias and also disabled the polyfill for @vueuse/head
behaviour by default. (It can still be enabled with experimental.polyfillVueUseHead
.)
experimental.viteNode
option . It can be configured instead with vite.devBundler
.
public
key . This was an undocument compatibility measure with Nuxt 2 and we plan to remove it entirely in v3.5.
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.
With Nuxt v3.4.0, we now advise that you explicitly install the @types/node
version that matches your Node version.
useRoute
is used in middleware (#20050 )
watch
with useFetch
(#19823 )
~
/~~
/@
/@@
aliases within layers (#19986 )
dir.pages
in page placeholder (#20079 )
devtools
when it's enabled (#20126 )
experimentalNoScripts
route rule (#19805 )
@vueuse/head
polyfill by default (#20131 )
x-nuxt-no-ssr
header by default (#20024 )
$config
object (#20081 )
useFetch
(#20052 )
@types/node
as a peerDependency (#20025 )
any
(#20105 )
.client
component placeholders (#20093 )
undefined
type for useCookie
return value (4f0b3c722 )
imports.autoImport
(#20180 )
ignorePrefix
to be changed (#20202 )
imports
configuration (#20073 )
headers
option for useFetch
(#20148 )
@pinia/nuxt
module name (#20199 )
overrides
(4a6f85277 )
overrides
(a15a9b66f )
JITI_ESM_RESOLVE
(#20172 )
head_ref
for dependency deduping (ae5df72c5 )
Sortie le 2 avril 2023
3.3.3 is your regularly scheduled bugfix/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.
setResponseStatus
signature with h3 (#19987 )
pages:extend
example (72724076b )
mkdist
to 1.2.0
(a96451d2d )
Sortie le 24 mars 2023
3.3.2 is a patch release with plenty of bug fixes.
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.
performance.mark()
(#19687 )
h3
utilities to set response status/code (#19713 )
useAsyncData
(#19225 )
$fetch
in top-level <script setup>
(#19357 )
return
statement (fc7867fb0 )
@nuxt/kit
example with node built-ins (#19873 )
Sortie le 14 mars 2023
3.3.0 is a minor (feature) release with lots of new features to play with. 3.3.1 was a swiftly following release to patch an issue with nuxi on Windows.
We've landed a raft of changes to enable local modules and improve DX. We now auto-scan your ~/modules
folder and register top level files there as modules in your project (#19394 ). When these files are changed, we'll automatically restart the nuxt server.
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
- '~/modules/purge-comments'
]
})
We also now expose nuxt/kit
for easy access to kit composables in your local project without having to install @nuxt/kit
(#19422 ).
You can add files to the watch
array to automatically restart the server (#19530 ). This is likely to be particularly useful for module authors. You can also trigger a restart of the Nuxt server with the new restart
hook (#19084 ). We also landed a couple of fixes on restarting the Nuxt server which should improve your experience when developing.
We've increased static asset maxAge to 1yr as a matter of best practice (#19335 ), and support tree-shaking more of your build (#19508 ). We also now support preloading <NuxtLink>
s with a route in object-syntax (#19120 ).
We also track how long it takes each module you use to perform its setup, and warn if it takes too long. You can see all these values by running your dev server with DEBUG=1
You can also opt-in to some of Nuxt's internal optimisations by configuring composables to be treeshaken in a particular environment (#19383 ), or to have magic keys automatically injected (#19490 ) - primarily useful for module authors.
We now handle chunk errors by default (#19086 ), meaning if your site updates with a redeploy, we automatically handle reloading it on navigation. You can disable this and handle it yourself with the new reloadNuxtApp
composable. You can also set experimental.restoreState
to preserve some of your app state across reloads.
We also have a new experimental error handling component: <NuxtClientFallback>
(nuxt/framework#8216 ) which can capture errors rendering on server, replace them with fallback content, and granularly trigger rerendering the part with an error on the client. This can be enabled with experimental.clientFallback
- feedback very welcome!
We've migrated to use unhead
directly (#19519 ) - and automatically tree-shake server-only head composables like useServerHead
from your client build (#19576 ), meaning you can have great SEO without needing to include meta tag logic that's relevant only for crawlers in your client build.
There's also a new useHeadSafe
composable that handles santising untrusted user input (#19548 ).
Working with the Chrome DevTools team, we've landed a couple of features across the unjs + Nuxt ecosystem meaning we now have first-class support for hiding Nuxt internal stack traces from logs in your (Chromium-based, for now) browser (#19243 ). We also landed a couple of improvements with stacktraces involving Nuxt hooks (unjs/hookable#69 and unjs/hookable#68 ) implementing console.createTask
.
Before | After |
---|---|
![]() |
![]() |
Types for server API routes are now more correct - with non-serialisable types stripped out of the return type (unjs/nitro#1002 ).
We also now type more of NuxtApp
and correctly type unknown injections for greater type-safety (#19643 ).
And if you were struggling with correct types when using transform
+ default
with Nuxt data fetching composables, fear no more - we now infer the types correctly (#19487 ).
This release comes with Nitro v2.3, which brings lots of improvements of its own. Check out the release for more info.
We now support useAppConfig
in nitro server routes (#19489 ) - a long-awaited change. Now useAppConfig
is consistently available throughout your app for non-runtime configuration from layers, modules, etc.
We've also added a nitro:build:public-assets
hook to allow modifying assets output from nitro's prerender/build phase (#19638 ).
As part of moving towards first-class support for PNP and pnpm support without --shamefully-hoist
, we've dropped support for some internal (deprecated) utilities using CJS resolve patterns (#19537 , #19608 ). We also now resolve dependencies like nuxt
, @nuxt/kit
and more using ESM search-paths. We'll be keeping a close eye on this.
We're also preparing the groundwork for support of new TypeScript Node16 module resolution (#19606 ), and as part of this have changed the format of our runtime output (using .js
instead of .mjs
extensions, providing types
fields for subpath exports, and more).
We've been testing out an experimental feature to allow modules and users to extend the Nuxt config schema (#15592 ), and we've now enabled this by default (#19172 ). We expect this will be particularly useful for module and layer/theme authors, and should result in some nicer DX for their users.
restart
hook is called (#19084 )
versions
to runtime nuxtApp (#19064 )
node_modules
and buildDir to x_google_ignoreList
(#19243 )
nuxt/kit
subpath for local use (#19422 )
~/modules
(#19394 )
priority
to allow overriding (#19252 )
trailingSlashBehavior
in defineNuxtLink
(#19458 )
logLevel
(#19369 )
<NuxtClientFallback>
component (#8216 )
watch
option and refactor dev server restarting (#19530 )
useHeadSafe
and remove layer around head imports (#19548 )
nitro:build:public-assets
hook (#19638 )
@vueuse/head
dependency (#19519 )
NuxtLink
(#19379 )
import.meta
types (#19338 )
/
from sourcemapIgnoreList
for windows support (73ade185b )
kit.*
files to published package (#19430 )
transform
(#19487 )
boolean
from inline module definitions (#19621 )
payloadExtraction
warning only when unset (#18516 )
versions
and modules (#19448 )
routeRules
(#19455 )
devServer.https
example (#19486 )
~/server/utils
directory in ~/utils
page (#19500 )
addComponent
jsdoc comment (#19503 )
--log-level
(06b9233b1 )
@nuxt/test-utils
package as external group (#19419 )
hasProtocol
options format (#19555 )
Sortie le 28 février 2023
3.2.3 is a patch release with bug fixes and performance improvements.
distDir
is unlinked (#19131 )
<NuxtLink>
(#19144 )
rel
attribute on internal link (#19309 )
noExternal
option (#19256 )
Sortie le 17 février 2023
3.2.1 is a patch release with (lots of) bug fixes and performance improvements since last week's minor release. 3.2.2 was a swiftly following release to patch an issue with
nuxi init
As a patch release, there are mostly bug fixes and performance improvements in the changelog. (Nevertheless, it's always worth reading through!) But one point of note is an experimental reload strategy when chunk errors are encountered. We're hoping to finalise the API and land it in v3.3 (our next feature release) with #19086 , but you can test out an experimental version with the following config:
export default defineNuxtConfig({
experimental: {
emitRouteChunkError: 'reload'
}
})
With this strategy, your app will hard reload on route changes if there's a chunk error. More info at #19038 .
app:chunkError
hook and reload strategy (#19038 )
#components
(#19008 )
nuxt/schema
subpath for augmentation (#18922 )
statusCode
is a number (#19001 )
nuxt/app
by default (#19009 )
nuxt/app
from optimised deps (9e789c76c )
isCustomElement
config for jsx transform (#19053 )
devServer
options from nuxt config (#19055 )
//
in path when constructing payload url (#19085 )
nuxi devtools
command (#18888 )
static
property (80f73d39c )
sendRedirect
usage (#19070 )
Sortie le 9 février 2023
3.2.0 is the first minor release since we've started our new release schedule. We've brought it forward by a couple of weeks to include some goodies we want you to be able to play with soon.
You can opt-in to Nuxt DevTools per-project by going to the project root and running:
npx nuxi@latest devtools enable
Restart your Nuxt server and open your app in browser. Click the Nuxt icon on the bottom (or press
Alt+D
) to toggle the DevTools.
runtimeConfig
, including inline type helpers useFetch
and $fetch
based on method.
It'll be a type error to use the wrong method when hitting an endpoint.
Plus, if you have multiple methods served by a single endpoint (like
~/server/api/test.get.ts
and~/server/api/test.post.ts
then the response type will match the kind of response you make.
useFetch
is now integrated with event.$fetch
, meaning cookies and context are now passed to api requests automagically within internal requests.
treeshakeClientOnly
feature
This is turned on by default but if you experience any issues, you can turn this off via:
export default defineNuxtConfig({ experimental: { treeshakeClientOnly: false } })
addRouteMiddleware
kit utility for module authors
Lots of features, including runtime proxy support using route rules, nested fetch calls, binary and raw storage operations, exposed
event.context.cf
(cloudflare) and built-in session support.For full details see release notes
addRouteMiddleware
method (#18553 )
ssr: false
(#18783 )
useFetch
return based on the method (#18526 )
ssr: false
(#18782 )
ssr: false
(#18828 )
<ClientOnly>
(#8713 )
useError
composable (#8912 )
preloadRouteComponents
page heading error (#18804 )
Sortie le 3 février 2023
3.1.2 is a patch release with bug fixes (particularly focusing on performance and DX).
defu
in all places (#18624 )
__publicAssetsURL
set before loading assets (#18642 )
_installedModules
(#18647 )
onNuxtReady
safe to run on server-side (#18706 )
vue-gtag
plugin example (#18528 )
useHead
(#18552 )
defineEventHandler()
to avoid warnings (#18557 )
JSON.stringify()
(#18590 )
@types/node
manually (6b2bc680b )
.env
to directory structure and improve config docs (#18594 )
head()
(#18650 )
validate
example (#18728 )
2.x
branch name (727cf7958 )
assertNumber
helper (aa646f065 )
nuxt-edge
for nuxt v2 (dd0e2643c )
Sortie le 14 juillet 2023
2.17.1 is the next patch release for Nuxt 2.
Sortie le 9 juin 2023
2.17.0 is the next minor release for Nuxt 2.
Nuxt 2.17 comes with a few new features, including better support for new Vue 2.7 types, and supporting passing postcss config as a function.
It also includes support for Node 20+ and a fix for a dependency issue with the Babel preset that affected new installs.
Sortie le 17 mars 2023
2.16.3 is a patch release with bug fixes.
error()
(#19044 )
less
into namespace (#19738 )
preset
to inner postcssOptions
(#19518 )
node-fetch-native
to externals list (#19755 )
nuxt
(4e9dcddcb )
2.x
version of nuxt instead of latest (#19737 )
Sortie le 1 mars 2023
2.16.2 is a patch release with bug fixes.
The main change in this patch release is that we now patch the crypto
node built-in during build to allow Nuxt 2 to be used on Node versions greater than Node 16, which should ease the pressure users feel after Node 16 reaches its own EOL this year.
Warning This should not be taken for an endorsement of continuing to run with Webpack 4, which is out of date and has a number of dependencies with issues. I expect that number to continue to grow, and we will not be able to resolve all of them. I would strongly urge migrating to Nuxt 3 if possible and the team will do our best to make this possible over the course of the year ❤️
charset
before title
(#18998 )
asyncData
(#18585 )
Sortie le 13 février 2023
Nuxt 2.16.1 is a patch release with a couple of small bugfixes to last week's 2.16.0 release.
@types
packages depending on webpack 5 (#18827 )
Location
from vue-router
(#18908 )
aba93e9
)
3d034a3
)
daed62a
)