chore(deps): update dependency nuxt to v3 #846
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
2.17.3
->3.11.2
Release Notes
nuxt/nuxt (nuxt)
v3.11.2
Compare Source
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🔥 Performance
useServerHead
in dev (#26421)🩹 Fixes
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
+ passhoistStatic
to vite plugin (#26563)typescript.shim
(#26607)useRoute
(#26633)💅 Refactors
navigateTo
for server (#26546)runtimeConfig
initialization of client side (#26558)📖 Documentation
prerenderRoutes
in dynamic routes (#26547)process.*
withimport.meta.*
(#26611)typescript.shim
JSDoc (#26626)🏡 Chore
❤️ Contributors
v3.11.1
Compare Source
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🩹 Fixes
ofetch
intypescript.hoist
defaults (#26316)tsx
parser (#26314)finish
types and add to docs (0d9c63b82)undefined
name when resolving trailing slash (#26358)📖 Documentation
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)🏡 Chore
🤖 CI
❤️ Contributors
v3.11.0
Compare Source
👀 Highlights
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! ✨
🪵 Better logging
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:
will now log to your browser console when you refresh the page:
👉 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.
🎨 Preview mode
A new
usePreviewMode
composable aims to make it simple to use preview mode in your Nuxt app.When preview mode is enabled, all your data fetching composables, like
useAsyncData
anduseFetch
will rerun, meaning any cached data in the payload will be bypassed.Read more in the docs.
💰 Cache-busting payloads
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.
👮♂️ Middleware
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).
⌫ New
clear
data fetching utilityNow,
useAsyncData
anduseFetch
expose aclear
utility. This is a function that can be used to setdata
to undefined, seterror
tonull
, setpending
tofalse
, setstatus
toidle
, and mark any currently pending requests as cancelled. (#26259)🕳️ New
#teleports
targetNuxt 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:🚦 Loading indicator and transition controls
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.🛍️ Server- and client-only pages
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 afallback
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).
🤠 Server component bonanza
When you are using server components, you can now use the
nuxt-client
attribute anywhere within your tree (#25479).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).
🔥 Performance improvements
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.
📂 Public assets handling
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 addednitro.publicAssets
directories with a custom prefix, these will now work.📦 Chunk naming
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:
💪 Type fixes
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).
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🚀 Enhancements
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 touseAsyncData
/useFetch
(#26259)🔥 Performance
isPrerendered
in dev for server page (#26061)🩹 Fixes
.config/nuxt.config
(5440ecece).config/nuxt.*
(7815aa534)error
inshowError
/createError
with h3 (#25945)useId
(#25969)vueCompilerOptions
property totsConfig
(#25924)useRuntimeConfig
in Nuxt renderer (#26058)typescript.shim
in favour of volar (#26052)defu
/h3
paths in type templates (#26085)toExports
fromunimport
(#26086)AsyncDataRequestStatus
type (#26023)<html>
and<body>
attrs (#26027)node_modules
formodulesDir
(#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
toselectiveClient
(357f8db41)consola
for now (adbd53a25)window
access more carefully (977377777)💅 Refactors
request
computation (#26191)nuxtMiddleware
toappMiddleware
(cac745470)📖 Documentation
useId
composable was introduced (#25953)domEnvironment
option to testing example (#25972)fallback
prop for<NuxtLayout>
(#26091)vue-tsc
(#26083)macros.pageMeta
andtypescript.esbuild
option (#26136)definePageMeta
page (#26139)app:manifest:update
hook (#26192)zhead
(e889a7df5)clear
(24217a992)appMiddleware
docs (da8e8eba8)🏡 Chore
✅ Tests
scrollY
(#26298)networkidle
(9b5bffbbb)🤖 CI
❤️ Contributors
v3.10.3
Compare Source
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🩹 Fixes
dedupe
option inuseFetch
(#25815)css
files with?inline
query (#25822)external
tonavigate
in custom<NuxtLink>
(#25887)@__PURE__
(#25842)setTimeout
before scrolling when navigating (#25817)head
indefineNuxtComponent
(#25410)undefined
paths inresolveTrailingSlashBehavior
(ba6a4132b)to.name
to be undefined rather than deleting entirely (4ca1ab7cf)📖 Documentation
.ts
extension when adding compiled files (#25855)callout
to new components (#25897)🏡 Chore
nuxt.config
to enable pages for docs typecheck (72a2e23cc)🤖 CI
❤️ Contributors
v3.10.2
Compare Source
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🩹 Fixes
refreshCookie
(#25635).pcss
extension as a CSS extension (#25673)<ClientOnly>
(#25714)baseURL
on serveruseRequestURL
(#25765)rootDir
, notprocess.cwd
, formodulesDir
(#25766)useId
if attrs were not rendered (#25770)📖 Documentation
Fix typo in
useAsyncData
docs (#25644)Add quotes to clarify what site title is in example (#25669)
Enable twoslash for some code snippets (#25679)
Add prepend option docs for
addComponentsDir
(#25683)Extend auto-scanned layer directories (#25720)
Improve wording in seo docs (#25692)
Add how to debug nuxt with node inspector (#25731)
Add missing export defaults for nuxt config (#25774)
Add import statement for mountSuspended (#25783)
Pass
event
touseRuntimeConfig
(#25788)🏡 Chore
❤️ Contributors
v3.10.1
Compare Source
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
👉 Changelog
compare changes
🔥 Performance
🩹 Fixes
refresh
functions (#25568)useId
type signature (#25614)$
from generated id inuseId
(#25615)rel
for same-site external links (#25600)inheritAttrs: false
when usinguseId
(#25616)💅 Refactors
NuxtLink
types (#25599)📖 Documentation
<NuxtLink>
defaults in nuxt config (#25610)🏡 Chore
pathe
in internal tests (e33cec958)nuxt
->nuxtApp
internally for consistency (c5d5932f5)🤖 CI
❤️ Contributors
v3.10.0
Compare Source
👀 Highlights
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights.
✨ Experimental shared
asyncData
when prerenderingWhen 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
anduseFetch
calls will be deduplicated and cached between renders of your site.👉 See full documentation.
🆔 SSR-safe accessible unique ID creation
We now ship a
useId
composable for generating SSR-safe unique IDs (#23368). This allows creating more accessible interfaces in your app. For example:✍️ Extending
app/router.options
It's now possible for module authors to inject their own
router.options
files (#24922). The newpages:routerOptions
hook allows module authors to do things like add customscrollBehavior
or add runtime augmenting of routes.👉 See full documentation.
Client-side Node.js support
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.Or provide your own polyfill, for example, inside a Nuxt plugin.
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.
🍪 Better cookie reactivity
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.🏥 Detecting anti-patterns
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 thevue-router
integration enabled (#25490). (<RouterView />
should not be used on its own.)🧂 Granular view transitions support
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:
And you can opt in/out granularly:
Finally, Nuxt will not apply View Transitions if the user's browser matches
prefers-reduced-motion: reduce
(#22292). You can setviewTransition: 'always'
; it will then be up to you to respect the user's preference.🏗️ Build-time route metadata
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).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 indefinePageMeta
.📦 Bundler module resolution
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.
✅ Upgrading
As usual, our recommendation for upgrading is to run:
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.
-->
👉 Changelog
compare changes
🚀 Enhancements
tryUseNuxtApp
composable (#25031)bundler
module resolution (#24837)pages:routerOptions
hook (#24922)setInterval
is used on server ([#25259](https://github.com/nuxt/nuxt/pull/25Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.