fix(deps): update nuxtjs monorepo to v3.10.3
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| @nuxt/kit (source) | 3.7.3 -> 3.10.3 |
||||
| nuxt (source) | 3.7.3 -> 3.10.3 |
Release Notes
nuxt/nuxt (@nuxt/kit)
v3.10.3
3.10.3 is a regularly-scheduled patch release.
✅ Upgrading
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.
👉 Changelog
🩹 Fixes
-
nuxt: Respect
dedupeoption inuseFetch(#25815) - nuxt: Bypass browser cache when fetching app build id (#25813)
-
nuxt: In dev, don't link
cssfiles with?inlinequery (#25822) -
nuxt: Pass
externaltonavigatein custom<NuxtLink>(#25887) -
nuxt: Mark internal island components with
@__PURE__(#25842) -
nuxt: Use
setTimeoutbefore scrolling when navigating (#25817) -
nuxt: Add missing type for
headindefineNuxtComponent(#25410) -
nuxt: Handle
undefinedpaths inresolveTrailingSlashBehavior(ba6a4132b) -
nuxt: Set
to.nameto be undefined rather than deleting entirely (4ca1ab7cf)
📖 Documentation
- Enable more blocks for twoslash (#25830)
- Remove
.tsextension when adding compiled files (#25855) - Replace
calloutto new components (#25897) - Fix incorrect wording (#25902)
🏡 Chore
- Use
nuxt.configto enable pages for docs typecheck (72a2e23cc) - Restore environment back to development (3f92cf04d)
- Unpin vite version 🙈 (d326e054d)
- nuxt: Use Exclude rather than Omit (3fc4231d3)
🤖 CI
❤️ Contributors
- Daniel Roe (@danielroe)
- Mateusz Kulpa (@mateuszkulpa)
- Jonathan Walters (@Chalks)
- Josh Layton (@jl8n)
- Julien Huang (@huang-julien)
- Damian Głowala (@DamianGlowala)
- Florent Delerue (@Flosciante)
- Alexander Lichter (@manniL)
- Anthony Fu (@antfu)
- OnlyWick (@OnlyWick)
- Michał Zarach (@michalzaq12)
- Miha Sedej (@tresko)
v3.10.2
3.10.2 is a regularly-scheduled patch release.
✅ Upgrading
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.
👉 Changelog
🩹 Fixes
-
nuxt: Export
refreshCookie(#25635) - nuxt: Allow prefetching urls with query string (#25658)
- nuxt: Remove undefined keys in route object (#25667)
-
vite: Treat
.pcssextension as a CSS extension (#25673) -
nuxt: Don't check for layout/page with
<ClientOnly>(#25714) - vite: Strip query strings for style chunk filenames (#25764)
- nuxt: Inline entry styles before component styles (#25749)
- vite: Optimise layer dependencies with vite (#25752)
-
nuxt: Don't add extra
baseURLon serveruseRequestURL(#25765) -
schema: Use
rootDir, notprocess.cwd, formodulesDir(#25766) -
nuxt: Only warn for
useIdif attrs were not rendered (#25770) - kit: Don't mutate existing component entry when overriding (#25786)
📖 Documentation
-
Fix typo in
useAsyncDatadocs (#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
eventtouseRuntimeConfig(#25788)
🏡 Chore
- schema: Add missing closing code block (#25641)
❤️ Contributors
- Sam Blowes (@blowsie)
- Daniel Roe (@danielroe)
- yoshihirokurosaki (@irishkooky)
- Eduardo San Martin Morote (@posva)
- Mahdi Shah Abbasian (@shahabbasian)
- João Carmona (@jpsc)
- Naim Ahmed Shuvo (@shuvo-me)
- Denis L (@DenisLug)
- GJSSSS (@gjssss)
- Anthony Fu (@antfu)
- Aman Desai (@amandesai01)
- Stephen Strange (@byStrange)
- Žan Fras (@frasza)
- Santiago Morales (@Aleroms)
- Hendrik Heil (@hendrikheil)
v3.10.1
3.10.1 is a regularly-scheduled patch release.
✅ Upgrading
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.
👉 Changelog
🔥 Performance
- nuxt: Clear route meta build cache when pages change (#25514)
🩹 Fixes
- nuxt: Fix syntax error when serializing route meta (#25515)
- nuxt: Only request animation frame on client (#25569)
- schema: Correctly set value for app.viewTransition (#25581)
-
nuxt: Correct return type of
refreshfunctions (#25568) - nuxt: Broadcast cookie change in correct format (#25598)
- nuxt: Generate typed route declarations when building (#25593)
-
nuxt: Remove key from
useIdtype signature (#25614) -
nuxt: Remove
$from generated id inuseId(#25615) -
nuxt: Don't set default
relfor same-site external links (#25600) -
nuxt: Warn if
inheritAttrs: falsewhen usinguseId(#25616) - nuxt: Fetch non-server rendered islands when hydrating (#25613)
- nuxt: Don't check page/layout usage when redirecting (#25628)
💅 Refactors
-
nuxt: Improve
NuxtLinktypes (#25599)
📖 Documentation
- Correct typo (#25523)
- Add and link to a section on Nuxt context (#23546)
- Explain how to set
<NuxtLink>defaults in nuxt config (#25610)
🏡 Chore
- Use
pathein internal tests (e33cec958) -
nuxt: Rename
nuxt->nuxtAppinternally for consistency (c5d5932f5)
🤖 CI
- Fix playwright cache (#25527)
- Retry flaky test when running in Windows with Webpack (#25536)
- Retry flaky test when running in Windows with Webpack (#25543)
- Retry flaky test when using Webpack (#25550)
- Simplify label PR workflow (#25579)
❤️ Contributors
- Daniel Roe (@danielroe)
- Julien Huang (@huang-julien)
- Harlan Wilton (@harlan-zw)
- Bobbie Goede (@BobbieGoede)
- xjccc (@xjccc)
- Ryan Clements (@RyanClementsHax)
- Enkot (@enkot)
- Damian Głowala (@DamianGlowala)
- Ted de Koning (@tdekoning)
- Troy Ciesco (@troyciesco)
- Michael Brevard (@GalacticHypernova)
- Arslan Ali (@warlock1996)
v3.10.0
3.10.0 is the next minor/feature release.
👀 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 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 usinguseAsyncDatato fetch data related to a particular page, you should provide a key that uniquely matches that data. (useFetchshould do this automatically.)
👉 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:
<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>
✍️ Extending 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.
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.
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.
🍪 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.
- We now will throw an error if
setIntervalis used on server (#25259). - We warn (in development only) if data fetch composables are used wrongly (#25071), such as outside of a plugin or setup context.
- We warn (in development only) if you are not using
<NuxtPage />but have thevue-routerintegration 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:
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.
🏗️ 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).
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.
📦 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.
export default defineNuxtConfig({
future: {
typescriptBundlerResolution: false
}
})
✅ Upgrading
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.
-->
👉 Changelog
🚀 Enhancements
-
nuxt:
tryUseNuxtAppcomposable (#25031) - nuxt: Add experimental sharedPrerenderData option (#24894)
-
schema: Default to
bundlermodule resolution (#24837) - nuxt: Warn if data fetch composables are used wrongly (#25071)
-
nuxt: Add
pages:routerOptionshook (#24922) - Experimental client-side Node.js compatibility (#25028)
-
nuxt: Throw error if
setIntervalis used on server (#25259) -
nuxt:
refreshCookie+ experimental CookieStore support (#25198) - nuxt: Allow controlling view transitions in page meta (#25264)
- nuxt: Slow down loading indicator when approaching 100% (#25119)
- nuxt: Experimentally extract route metadata at build time (#25210)
-
nuxt:
useIdcomposable (#23368)
🔥 Performance
-
vite: Avoid
endsWithwhen checking for whitespace (#24746)
🩹 Fixes
-
nuxt: Disable View Transitions if
prefers-reduced-motion(#22292) - nuxt: Add declaration file with correct node16 imports (#25266)
-
nuxt: Allow omitting
fallbackin island response (#25296) -
schema: Remove
defineModeloption as it is now stable (#25306) - nuxt: Overwrite island payload instead of merging (#25299)
-
vite: Pass
hiddensourcemap values to vite (#25329) - nuxt: Use named import for lazy components (#25286)
-
nuxt: Deprecate boolean values for
dedupe(#25334) - nuxt: Use default export for raw components (#25282)
- nuxt: Handle plugin dependencies with mixed load state (#25318)
-
nuxt: Preserve
instance.attrsin client-only components (#25381) - nuxt: Stop tracking suspense when error hydrating page (#25389)
- nuxt: Add router.options files in definite order (#25397)
-
nuxt: Do not rerun synchronous
callOncecallbacks (#25431) -
nuxt: Remove dynamic
nuxt-clientwithin template code (#25464) -
nuxt: Add runtime check to filter plugins in
dependsOn(#25409) -
nuxt: Improve global/payload error type with
NuxtError(#25398) - vite: Extract styles for shared chunks (#25455)
-
nuxt: Avoid
vue-routerwarning with routeRule redirect (#25391) -
nuxt: Improve return type of
useRequestEvent(#25480) -
nuxt: Match nitro + nuxt
useRuntimeConfigsignatures (#25440) - nuxt: Prevent initial scroll jump when loading page (#25483)
-
nuxt: Prioritise later items in
pages:routerOptionshook (#25509)
💅 Refactors
-
nuxt: Remove
currentRoutenon-ref warning (#25337)
📖 Documentation
- Explain how to auto-install git layer deps (#24250)
- Fix eslint link (87641c867)
- Fix typo (#25326)
-
nuxt: Add
@sinceannotations to exported composables (#25086) - Add emphasis to
useAsyncDataexplanation (#25392) - Add separate docs page for
error.vue(#25320) - Add explanation about layout usage in
error.vue(#25396) - Use
.cjsextension forecosystem.config(#25459) - Add fuller explanation in
routeRulesexample of swr/isr (#25436) - Warn that island client components don't support slots (#25454)
- Updated addPluginTemplate example to add filename property (#25468)
- Update link to vercel edge network overview (e01fb7ac3)
- Remove unnecessary warning on
sharedPrerenderData(b0f50bec1) - Add more documentation for
pages:routerOptions(46b533671)
🏡 Chore
- Fix typo in warning log (#25265)
-
nuxt: Warn if
NuxtPageis not used when pages enabled (#25490) - Remove extra 'not' in warning message (b96fe1ece)
✅ Tests
-
nuxt: Add test for
data-island-uidreplacement (#25346) - Remove miswritten test (#25347)
- Avoid explicit timeouts (#25395)
🤖 CI
- Only release from main repo (#25354)
- Label pull request based on type in title (#25404)
- Wrap PR base label in quotes (#25432)
- Update extracting PR labels' names (#25437)
- Skip adding PR labels if there are none to add (#25475)
- Update changelog with github tags/handles of users (60ab5deb0)
- Import
$fetch(a1fb399eb)
❤️ Contributors
- Daniel Roe (@danielroe)
- Якин Никита (@TakNePoidet)
- Nozomu Ikuta (@NozomuIkuta)
- Ivan Kalachikov (@ivan-kalachikov)
- Horváth Bálint (@horvbalint)
- kevin olson (@acidjazz)
- Michael Brevard (@GalacticHypernova)
- Enkot (@enkot)
- Damian Głowala (@DamianGlowala)
- Mostafa Said (@MooseSaeed)
- Julien Huang (@huang-julien)
- TroyanOlga (@TroyanOlga)
- Rivaland TAWOUAFO NGUTE (@caporalCode)
- Becem (@becem-gharbi)
- Shay (@shayr1)
- hitochan777 (@hitochan777)
- Luke Nelson (@luc122c)
- Alexander Lichter (@manniL)
- Sébastien Chopin (@Atinux)
- Hriteek Bista (@hriteek)
- Pooya Parsa (@pi0)
- Dominic Marcelino (@Dominic-Marcelino)
- Luke Warlow (@lukewarlow)
- Danila Rodichkin (@daniluk4000)
v3.9.3
3.9.3 is a hotfix release to address a regression with CSS in development
✅ Upgrading
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.
👉 Changelog
🩹 Fixes
- nuxt: Render stylesheets in dev for non-islands (#25243)
-
nuxt: Don't set 2x
data-island-uidfor island children (#25245) - nuxt: Don't share object between raw cookie and cookie ref (#25255)
📖 Documentation
- Corrects variable name used in comment (#25238)
- Deleted an extra character (#25248)
- Remove space before colon (#25251)
✅ Tests
- Add separate suspense test suite (#22947)
❤️ Contributors
- Danila Rodichkin (@daniluk4000)
- Anthony Fu (@antfu)
- Julien Huang (@huang-julien)
- Mustafa60x (@mustafa60x)
- Александр Дьяконов (@Holiden)
- Flowern (@FlorianWerndl)
- Daniel Roe (@danielroe)
v3.9.2
3.9.2 is a regularly scheduled patch release.
✅ Upgrading
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.
👉 Changelog
🔥 Performance
-
nuxt: Iterate rather than using
Object.fromEntries(#24953)
🩹 Fixes
- nuxt: Add missing script blocks before island transform (#25148)
-
kit: Improve types for
optionsinaddTemplate(#25109) - nuxt: Apply more import protections for nitro runtime (#25162)
-
nuxt: Sort
pages/files inen-USlocale (#25195) -
nuxt: Check for layout after
nextTick(#25197) - nuxt: Set nitro log level to match nuxt options (#25213)
- nuxt: Await async payload revivers (#25222)
- nuxt: Render user-inserted links in island responses (#25219)
💅 Refactors
- nuxt: Refactor island response + improve rendering (#25190)
-
nuxt: Rename to
data-island-component(#25232)
📖 Documentation
- Correct nuxt image discussion link (#25090)
- Fix typo (#25100)
- Suggest using
<NuxtPage>rather than<RouterView>(#25106) - Fix typo (#25127)
- Add demo for view transitions api (3c5ea3457)
- Remove reference to
@nuxt/bridge-edge(3f09ddc31) - Remove bridge recommendation only relevant Vue <= 2.6.14 (7bb90f587)
- Bump nuxt 2 version (98fb2be07)
- Remove invalid nuxi aliases (#25209)
- Add
--log-leveldescription (#25211) - Added
immediate: falsein the appropriate example (#25224) - Mention
.global.vuefilename for global components (#25144) - Clarify reactivity in composables directory (#23731)
- Remove
lagonfrom deployment providers (#24955) - Add eslint setup guide (#24976)
- Add information on custom path regexp in
definePageMeta(#25073) - Fix
addDevServerHandlerAPI (#25233) - Mention installing
nuxifor bridge (637f5622d)
🏡 Chore
- Use
v3branch sandbox in issue template (#25174)
❤️ Contributors
- Daniel Roe (@danielroe)
- Julien Huang (@huang-julien)
- Larry Williamson (@L422Y)
- Chris Visser (@chris-visser)
- Maxime Pauvert (@maximepvrt)
- Nils Wiesinger (@warflash)
- chris-basebone (@chris-basebone)
- Alexander Lichter (@manniL)
- Bertil Johannes Ipsen (@bipsen)
- Matej Černý (@CernyMatej)
- kongmoumou (@kongmoumou)
- Yi-Ru Lan (@awdr74100)
- Kiarttipum Charoenpojvajana (@44kia244)
- Pooya Parsa (@pi0)
- Inesh Bose (@ineshbose)
- Sébastien Chopin (@Atinux)
- Petar Nikolov (@petarvnikolov)
- Michael Brevard (@GalacticHypernova)
- toto6038 (@toto6038)
- gal-cernilogar (@gal-cernilogar)
- Shoshana Connack (@moshetanzer)
v3.9.1
3.9.1 is a regularly scheduled patch release.
✅ Upgrading
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.
👉 Changelog
🔥 Performance
-
nuxt: Avoid multiple iterations in
useRequestHeaders(#24853) -
kit,schema,nuxt: Refactor
startsWithto array access (#24744) - nuxt: Use single iteration when normalising routes (#24946)
- nuxt: Remove some line breaks when rendering html (#24888)
🩹 Fixes
-
nuxt: Catch error in
NuxtErrorBoundarywithssr: false(#24896) - kit: Show correct error when module can't be loaded (#24957)
- nuxt: Deeply watch island props (#24986)
- nuxt: Don't show transition on initial page load (#24935)
- nuxt: Clone cookie to detect changes within object (#25007)
- nuxt: Do not warn about missing layouts on error page (#25008)
-
nuxt: Ignore plugins typed as
anyin inferred injections (#25010) -
nuxt: Reuse intermediate setup state in
<ClientOnly>(#25009) - nuxt: Skip scanning layout/middleware without name (#25015)
-
nuxt: Wrap universal router
currentRouteinRef(#25026) - nuxt: Stop loading indicator if page keys are the same (#24931)
💅 Refactors
-
nuxt: Remove old reference to
nuxt-config-schema(#25067)
📖 Documentation
- Switch
features/futuredocs (f5676fba5) - Corrected json syntax in 7.esm.md (#24937)
- Specify yarn pnp opt-out for install (#24923)
- Capitalise hash for
vue-routerdocs link (#24948) - Add badge for callOnce utility (792cf6713)
- Warn about hydration issue with URL fragment (#24961)
- Mention
readValidatedBodyandgetValidatedQuery(#24990) - Add missing imports for nitro examples (#25003)
- Add an example of provide with object syntax plugins (#24993)
- Update EOL date for Nuxt 2 (afbc4080b)
- Add callout for
getValidatedRouterParams(#25057) - Warn about ref unwrapping when providing refs from plugin (#25054)
🏡 Chore
- Add bullet for adding tests in pr template (2bda817ea)
✅ Tests
❤️ Contributors
- Pooya Parsa (@pi0)
- Julien Huang (@huang-julien)
- Michael Brevard (@GalacticHypernova)
- Luke Nelson (@luc122c)
- Alex Liu (@Mini-ghost)
- Daniel Roe (@danielroe)
- Alireza Jahandideh (@Youhan)
- Mateusz Kulpa (@mateuszkulpa)
- Bernhard Berger (@bernhardberger)
- Peter (@tada5hi)
- Sébastien Chopin (@Atinux)
- heygsc (@heygsc)
- Clément Ollivier (@clemcode)
- Soheil Nazari (@s0h311)
- Alexander Lichter (@manniL)
v3.9.0
3.9.0 is the next minor release.
👀 Highlights
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.
⚡️ Vite 5
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.
✨ Vue 3.4 ready
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"
}
}
🏝️ Interactive Server Components
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! 🙏
🔥 Automatic Server Optimisations
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
}
}
})
🚦 Granular Loading API
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).
🏁 Run single events in 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.
🚨 Error Types
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.
🔥 Schema Performance
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.
✅ Upgrading
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.
👉 Changelog
🚀 Enhancements
-
nuxt: Warn when page uses a layout without
<NuxtLayout>(#24116) -
kit: Support prepend option for
addComponentsDir(#24309) - kit: Allow customising logger options (#24243)
-
nuxt: Allow readonly option for
useCookie(#24503) -
nuxt: Add path to
error.datawhen throwing 404 errors (#24674) -
kit: Load
/moduleor/nuxtmodule subpath if it exists (#24707) - nuxt: Layers support for spa loading template (#24709)
-
nuxt: Expose
refreshon islands and server components (#24261) -
nuxt: Add
dedupeoption for data fetching composables (#24564) -
vite: Replace browser globals with
undefinedon server (#24711) - nuxt: Allow plugins to specify dependencies (#24127)
-
kit: Add new
addServerScanDircomposable (#24001) -
nuxt: Transform
setupwithindefineComponentoptions (#24515) - nuxt: Allow customising fallback layout (#24777)
-
nuxt:
useRequestHeaderutility (#24781) - nuxt: Move loading api behind hooks (#24010)
-
nuxt: Add
callOnceutil to allow running code only once (#24787) -
nuxt: Allow client components within
NuxtIsland(#22649) -
schema: Default to
bundlermodule resolution (#22821) -
kit,nuxt,vite,webpack: Add
toArrayutil (#24857)
🔥 Performance
-
vite: Avoid duplicate
resolveoperation (#24736) - nuxt: Avoid duplicate iterations over layers (#24730)
-
kit: Avoid duplicate
joinoperation (#24717) - vite: Simplify manifest property acccess (#24715)
- nuxt: Don't dedupe fewer than two middleware/plugins (#24718)
-
schema: Avoid duplicate
getoperations (#24734) - schema: Use parallel promises (#24771)
-
nuxt: Avoid duplicate
useRuntimeConfigcall (#24843) -
vite: Avoid duplicate
JSON.stringifyoperation (#24848)
🩹 Fixes
- nuxt: Avoid recursive ssr errors (#24399)
-
nuxt: Improve path resolve for
import.d.ts(#24413) -
nuxt: Remove experimental
reactivityTransform(vue 3.4) (#24477) - nuxt: Ignore manifest when prerendering (#24504)
-
nuxt: Don't strip literals from template in
<DevOnly>(#24511) -
vite: Use
isBuiltinpolyfill for greater node support (#24512) - nuxt: Island components with number prefix (#24469)
- nuxt: Use consistent annotations for tree-shaking (#24514)
- nuxt: Skip prerendering all pages in hash mode (#24517)
- nuxt: Skip router middleware/redirections for islands (#24421)
- nuxt: Remove trailing slash before checking if prerendered (#24516)
-
nuxt: Skip check for
<NuxtLayout>usage in islands (#24529) - vite,webpack: Don't add type checker/analyzer when testing (#24608)
- nuxt: Do not try auto-install outside of a Nuxt context (#24605)
- nuxt: Merge and apply layer hooks (#24639)
- nuxt: Only add/remove trailing slash for http protocols (#23296)
-
nuxt: Ensure
errorinuseAsyncDatahas correct type (#24396) -
nuxt: Add
appManifestmiddleware after modules run (#24786) -
nuxt: Revert async transform of
setupwithindefineComponent(#24784) - nuxt: Eager load island components map (#24584)
- nuxt: Register override hooks separately (#24833)
-
nuxt: Add
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__(#24836) -
kit: Auto-detect
modefromfilePathforaddComponent(#24835) -
schema: Revert
bundlermodule resolution due to lack of support (22ce98d61) -
kit: Don't add local
~/modulesdirs tomodulesDir(#24457)
💅 Refactors
-
nuxt: Use
defineComponentto infer prop types for router-link stub (dc0e8347b) -
nuxt: Opt-in to future
jiti.importfor schema (#24526) -
nuxt: Remove
process.*usage in nuxt vue app (#24749) -
schema: Introduce
futureandfeaturesnamespace (#24880)
📖 Documentation
- Fix typo (#24395)
- Update code to show how to enable
typedPages(#24436) - Add
defineNuxtConfigto deployment example (#24451) - Update link to more info about key/keepalive (1b1cc4f4e)
- Update Nuxt 2 EOL date in roadmap (#24602)
- Prefer
~to@alias in examples (#24574) - Fix typo (6a1c05401)
- Warn about using differently names env variables (#24612)
- commands: Add tunnel option (50d46f068)
- Add file name to code block (#24620)
- Remove linking to nuxt-themes org (6f44e9470)
- Update yarn
-ooption to--open(#24644) - Add alt text for roadmap img tags (1f1049858)
- Add missing props for
<NuxtPage>(#24675) - Add more info about custom serialize/revive (#24680)
- Fix grammar (#24737)
- Add documentation on
getCachedDataoption (#24697) - Fix
addServerScanDirexample (7cd02e290) - Add panda css to styling guide (#24178)
- Highlight the possibility of middleware to return nothing (#24241)
- Setting middleware at build time (#23480)
- Remove deprecated
loadNuxtoptions (#24201) - Improvements on data-fetching (6d50b4744)
- Add documentation for
nuxi module(#24790) - Update return for
useFetchanduseAsyncData#24407 (#24775, #24407) - Add docs for runtime test environment (#24658)
- Update example test snapshots to remove escapes (5de779a7d
Configuration
📅 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 these updates again.
- [ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Mend Renovate. View repository job log here.