frontend
frontend copied to clipboard
chore(deps): update dependency nuxt to v3.17.0
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| nuxt (source) | devDependencies | minor | 3.16.0 -> 3.17.0 |
Release Notes
nuxt/nuxt (nuxt)
v3.17.0
👀 Highlights
This release brings a major reworking of the async data layer, a new built-in component, better warnings, and performance improvements!
📊 Data Fetching Improvements
A major reorganization of Nuxt's data fetching layer brings significant improvements to useAsyncData and useFetch.
Although we have aimed to maintain backward compatibility and put breaking changes behind the experimental.granularCachedData flag (disabled by default), we recommend testing your application thoroughly after upgrading. You can also disable experimental.purgeCachedData to revert to the previous behavior if you are relying on cached data being available indefinitely after components using useAsyncData are unmounted.
👉 Read the the original PR for full details (#31373), but here are a few highlights.
Consistent Data Across Components
All calls to useAsyncData or useFetch with the same key now share the underlying refs, ensuring consistency across your application:
<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers)
</script>
<!-- ComponentB.vue -->
<script setup>
// This will reference the same data state as ComponentA
const { data: users, status } = useAsyncData('users', fetchUsers)
// When either component refreshes the data, both will update consistently
</script>
This solves various issues where components could have inconsistent data states.
Reactive Keys
You can now use computed refs, plain refs, or getter functions as keys:
const userId = ref('123')
const { data: user } = useAsyncData(
computed(() => `user-${userId.value}`),
() => fetchUser(userId.value)
)
// Changing the userId will automatically trigger a new data fetch
// and clean up the old data if no other components are using it
userId.value = '456'
Optimized Data Refetching
Multiple components watching the same data source will now trigger only a single data fetch when dependencies change:
// In multiple components:
const { data } = useAsyncData(
'users',
() => $fetch(`/api/users?page=${route.query.page}`),
{ watch: [() => route.query.page] }
)
// When route.query.page changes, only one fetch operation will occur
// All components using this key will update simultaneously
🎭 Built-In Nuxt Components
<NuxtTime> - A new component for safe time display
We've added a new <NuxtTime> component for SSR-safe time display, which resolves hydration mismatches when working with dates (#31876):
<NuxtTime :time="new Date()" format="YYYY-MM-DD" />
The component accepts multiple time formats and gracefully handles both client and server rendering.
Enhanced <NuxtErrorBoundary>
The <NuxtErrorBoundary> component has been converted to a Single File Component and now exposes error and clearError from the component - as well as in the error slot types, giving you greater ability to handle errors in your templates and via useTemplateRef (#31847):
<NuxtErrorBoundary @​error="handleError">
<template #error="{ error, clearError }">
<div>
<p>{{ error.message }}</p>
<button @​click="clearError">Try again</button>
</div>
</template>
<!-- Content that might error -->
<MyComponent />
</NuxtErrorBoundary>
🔗 Router Improvements
<NuxtLink> now accepts a trailingSlash prop, giving you more control over URL formatting (#31820):
<NuxtLink to="/about" trailing-slash>About</NuxtLink>
<!-- Will render <a href="/about/"> -->
🔄 Loading Indicator Customization
You can now customize the loading indicator with new props directly on the component (#31532):
hideDelay: Controls how long to wait before hiding the loading barresetDelay: Controls how long to wait before resetting loading indicator state
<template>
<NuxtLoadingIndicator :hide-delay="500" :reset-delay="300" />
</template>
📚 Documentation as a Package
The Nuxt documentation is now available as an npm package! You can install @nuxt/docs to access the raw markdown and YAML content used to build the documentation website (#31353).
💻 Developer Experience Improvements
We've added several warnings to help catch common mistakes:
- Warning when server components don't have a root element #31365
- Warning when using the reserved
runtimeConfig.appnamespace #31774 - Warning when core auto-import presets are overridden #29971
- Error when
definePageMetais used more than once in a file #31634
🔌 Enhanced Module Development
Module authors will be happy to know:
- A new
experimental.enforceModuleCompatibilityallows Nuxt to throw an error when a module is loaded that isn't compatible with it (#31657). It will be enabled by default in Nuxt v4. - You can now automatically register every component exported via named exports from a file with
addComponentExports#27155
🔥 Performance Improvements
Several performance improvements have been made:
- Switched to
tinyglobbyfor faster file globbing #31668 - Excluded
.datadirectory from type-checking for faster builds #31738 - Improved tree-shaking by hoisting the
purgeCachedDatacheck #31785
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxi@latest upgrade --dedupe
This refreshes your lockfile and pulls in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
👉 Changelog
🚀 Enhancements
- nuxt: Accept
hideDelayandresetDelayprops for loading indicator (#31532) - nuxt: Warn server components need root element (#31365)
- docs: Publish raw markdown/yaml docs as
@nuxt/docs(#31353) - kit,nuxt: Pass dotenv values from
loadNuxtConfigto nitro (#31680) - nuxt,vite: Support disabling scripts in dev mode (#31724)
- nuxt: Warn if user uses reserved
runtimeConfig.appnamespace (#31774) - kit,schema: Allow throwing error if modules aren't compatible (#31657)
- nuxt: Extract
middlewarewhen scanning page metadata (#30708) - nuxt: Warn if core auto-import presets are overridden (#29971)
- nuxt: Scan named exports with
addComponentExports(#27155) - nuxt: Convert
<NuxtErrorBoundary>to SFC + exposeerror/clearError(#31847) - nuxt: Add
<NuxtTime>component for ssr-safe time display (#31876) - nuxt: Add
trailingSlashprop to<NuxtLink>(#31820)
🔥 Performance
- kit,rspack,webpack: Switch to
tinyglobby(#31668) - kit: Exclude
.datadirectory from type-checking (#31738) - nuxt: Hoist
purgeCachedDatacheck to improve tree-shaking (#31785) - nuxt: Remove
oxc-parsermanual wasm fallback logic (#31484) - nuxt: Remove unecessary type check for useFetch (#31910)
🩹 Fixes
- kit,vite: Ensure all
modulesDirpaths are added tofs.allow(#31540) - nuxt: Pass slots through to lazy hydrated components (#31649)
- vite: Do not return 404 for dev server handlers which shadow
/_nuxt/(#31646) - nuxt: Sync error types for
useLazyAsyncData(#31676) - nuxt: Strip base url from
error.url(#31679) - nuxt: Render inline styles before
app:renderedis called (#31686) - nuxt: Update nitro imports (0bec0bd26)
- nuxt: Check for
fallbackattribute when stripping<DevOnly>(c1d735c27) - vite: Invalidate files not present in module graph (ecae2cd54)
- nuxt: Do not add manifest preload when
noScripts(c9572e953) - nuxt: Do not prompt to update
compatibilityDate(#31725) - nuxt: Show brotli size by default when analyzing bundle (#31784)
- nuxt: Always pass
statusMessagewhen rendering html error (#31761) - nuxt: Error when
definePageMetais used more than once (#31634) - nuxt: Parse
error.databefore renderingerror.vue(#31571) - nuxt: Use single synced asyncdata instance per key (#31373)
- nuxt: Use
useAsyncDatain console log (#31801) - nuxt: Wait for suspense to resolve before handling
NuxtErrorBoundaryerror (#31791) - vite: Disable
preserveModules(#31839) - nuxt: Align
pendingwithstatusvalue for v4 (#25864) - nuxt: Consider full path when de-duplicating routes (#31849)
- nuxt: Augment
nuxt/appin generated middleware and layouts declarations (#31808) - nuxt: Correct order of args passed to
withoutBase(f956407bb) - vite: Dedupe
vuein vite-node dev server (f3882e004) - ui-templates: Pass pointer events through spotlight div in error dev template (#31887)
- kit: Include user-defined types before internal ones in
tsconfig.json(#31882) - nuxt: Do not purge nuxt data if active
useNuxtData(#31893) - nuxt: Do not include components of key in
useFetchwatch sources (#31903) - nuxt: Use first existing
modulesDirto store build cache files (#31907)
💅 Refactors
- nuxt: Use
shallowReffor primitives as well (#31662) - nuxt: Move island renderer into its own event handler (#31386)
- nuxt: Remove unneeded import (#31750)
- nuxt: Use
_replaceAppConfigwhen applying hmr (#31786) - nuxt: Use new unplugin filter options (#31868)
- schema: Do not generate types for
ConfigSchema(#31894)
📖 Documentation
- Add note on extending auto-imports (#31640)
- Improve description of
app.vue(#31645) - Use video-accordion video and add more videos (#31655)
- Add description of
templateParamsto seo docs (#31583) - Refine auto-imports documentation (#31700)
- Fix nuxt logo on website badge (#31704)
- Update tailwindcss link (b5741cb5a)
- Adjust description of
useHydration(#31712) - Remove trailing slash (#31751)
- Remove comment about
callOncereturning value (#31747) - Use
vs.consistently (#31760) - Update nitro
addServerHandlerexample (#31769) - Add supporting shared folder video (#31651)
- Update example for component auto-import in nuxt modules (#31757)
- Refine nuxt kit components documentation (#31714)
- Use trailing slash for vitest link (82de8bcf8)
- Fix casing (#31805)
- Add discord and nuxters links (#31888)
- Fix typos (#31898)
📦 Build
- nuxt: Use
vue-sfc-transformerto process sfcs (#31691)
🏡 Chore
- Update renovate config (565c0b98e)
- Upgrade webpack separately (e1f5db34f)
- Update internal ui-templates licence to MIT (f8059fb8b)
- Sort package.json (a6cbd71f8)
✅ Tests
- nuxt: Add customizable test api for pages tests (#31619)
- kit: Fix tests when running on Windows (#31694)
- Update page metadata snapshot (89a596075)
- Add basic runtime tests for
<NuxtErrorBoundary>(4df92c45f) - Add version to mock nuxt (915fae2fd)
- Update assertion for
pendingWhenIdle(08f2224c8) - Remove incorrect assertions (fdc4b5343)
- Update tests for purgeCachedData (c6411eb17)
🤖 CI
- Add notify-nuxt-website workflow (#31726)
❤️ Contributors
- @beer (@iiio2)
- Julien Huang (@huang-julien)
- Daniel Roe (@danielroe)
- Saeid Zareie (@Saeid-Za)
- Bobbie Goede (@BobbieGoede)
- Damian Głowala (@DamianGlowala)
- Maxime Pauvert (@maximepvrt)
- Leonid (@john-psina)
- Wind (@productdevbook)
- Arkadiusz Sygulski (@Aareksio)
- Rohan Dhimal (@drowhannn)
- xjccc (@xjccc)
- Robin (@OrbisK)
- Alex Liu (@Mini-ghost)
- Daniel Kelly (@danielkellyio)
- Jeffrey van den Hondel (@jeffreyvdhondel)
- Alexander Lichter (@TheAlexLichter)
- Sébastien Chopin (@atinux)
- Yizack Rangel (@Yizack)
- Joaquín Sánchez (@userquin)
- IlyaL (@ilyaliao)
- Ben McCann (@benmccann)
- Anthony Fu (@antfu)
- Alexandru Ungureanu (@unguul)
v3.16.2
3.16.2 is the next patch release.
✅ Upgrading
Our recommendation for upgrading is to run:
npx nuxi@latest upgrade --dedupe
This will deduplicate your lockfile as well, and help ensure that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.
👉 Changelog
🔥 Performance
- nuxt: Improve tree-shaking of
useRequestEventon client (#31586)
🩹 Fixes
- nuxt: Pass down attrs to
<Body>and<Html>(#31513) - nuxt: Use greedy catchall when
/indexis the last segment (#31528) - nuxt: Reset
page:loading:endhook before navigation (#31504) - nuxt: Write initial cookie value if different from
document.cookie(#31517) - nuxt: Support template string quotes in
resolveComponent(#31526) - nuxt: Show fatal errors thrown in middleware (#31518)
- nuxt: Use name to index route providers in dev (#31544)
- nuxt: Improve default scroll behaviour (#31545)
- vite: Return 404 for non-existent
_nuxt/paths in development (#31543) - nuxt: Pass error data to
error.vue(#31573) - nuxt: Use
unheadv2 api in default welcome + error pages (#31584) - nuxt: Improve consistency of page metadata extraction (#31306)
- nuxt: Do not remove meta when
scanPageMetais disabled (0ba454b21)
💅 Refactors
- nuxt: Simplify conditional branches of
<NuxtPage>(#31561) - Replace
useServerHeadinonPrehydratewithuseHead(#31585)
📖 Documentation
- Move custom directories note to the correct place (#29100)
- Update example to
useTemplateRef(#31458) - Provide async function for
$fetch(#31459) - Mention the possibility to scan pages based on a pattern (#31462)
- Add
dedupeflag (#31467) - Improve
refreshNuxtDatadocs (#31448) - Add missing
--before--template(#31469) - Migrate to @nuxt/content v3 (#31150)
- Fix icon for main docs (e7828d9c6)
- Save selected package manager (#31520)
- Improve refresh nuxt data example (#31487)
- Note that middleware runs on error pages as well (df14c0263)
- Replace all 'Nuxt 3' with 'Nuxt' in documentation (#31519)
resolveComponentonly auto-imports components with literal strings (#31511)- Add ticks around
tsconfig.json(#31473) - Capitalize heading (#31523)
- Update links to unhead.unjs.io (1913febbb)
- Document that props are passed via server components via query (db7688219)
- Improve description of
page:startandpage:finishhooks (#31570)
🏡 Chore
- Ignore builds (e34ae380d)
✅ Tests
- Avoid invalid nested font face (#31524)
- Add test for loading indicator with custom key (25ca9b819)
- Add test for custom prop + loading indicator (94bfed031)
- Update snapshot (55134fc2a)
❤️ Contributors
- Daniel Roe (@danielroe)
- Julien Huang (@huang-julien)
- Bobbie Goede (@BobbieGoede)
- Alex Liu (@Mini-ghost)
- Dennis Adriaansen (@dennisadriaans)
- Guillaume Chau (@Akryum)
- @beer (@iiio2)
- 翠 / green (@sapphi-red)
- xjccc (@xjccc)
- Hugo Richard (@HugoRCD)
- Sébastien Chopin (@atinux)
- Johannes Buchholz (@jhony1104)
- Alexander Lichter (@TheAlexLichter)
- Matej Černý (@cernymatej)
- Claudiu (@sofuxro)
v3.16.1
🔥 Performance
- nuxt: Use browser cache for payloads (#31379)
🩹 Fixes
- nuxt: Restore nuxt aliases to nitro compilerOptions.paths (#31278)
- nuxt: Use new
mocked-exports(#31295) - nuxt: Check resolved options for polyfills (#31307)
- nuxt: Render style component html (#31337)
- nuxt: Add missing lazy hydration prop in regex (#31359)
- nuxt: Fully resolve nuxt dependencies (#31436)
- vite: Don't show interim vite build output files (#31439)
- nuxt: Ignore prerendering unprefixed public assets (151912ec3)
- nuxt: Use more performant router catchall pattern (#31450)
- nuxt: Prevent param duplication in
typedPagesimplementation (#31331) - nuxt: Sort route paths before creating route tree (#31454)
📖 Documentation
- Update link to vercel edge network (ec20802a5)
- Improve HMR performance note for Windows users (#31301)
- Correct WSL note phrasing (#31322)
- Fix typo (#31341)
- Adjust
app.headexample (#31350) - Include package manager options in update script (#31346)
- Add missing comma (#31362)
- Add mention of
addServerTemplateto modules guide (#31369) - Add
rspackand removetest-utilsfor monorepo guide (#31371) - Adjust example (#31372)
- Update experimental docs (#31388)
- Use
inisyntax block highlighting for.envfiles (f79fabe46) - Improve
useHydrationdocs (#31427) - Update broken docs links (#31430)
- Mention possibility of prerendering api routes (#31234)
🏡 Chore
- Fix gitignore (6fe9dff7e)
- Bump axios dependency in lockfile (c3352e80b)
- Lint repo (2ab20bfdc)
- Add scorecard badge (#31302)
- Dedupe (be5d85f2b)
✅ Tests
- Migrate runtime compiler test to playwright (+ add test cases) (#31405)
- Migrate spa preloader tests to playwright (#31273)
- Use
srvxand random port for remote provider (#31432)
🤖 CI
❤️ Contributors
- Daniel Roe (@danielroe)
- Anoesj Sadraee (@Anoesj)
- Peter Radko (@Gwynerva)
- Adam DeHaven (@adamdehaven)
- Alex Liu (@Mini-ghost)
- Julien Huang (@huang-julien)
- Francesco Agnoletto (@Kornil)
- Guillaume Chau (@Akryum)
- imreegall (@imreegall)
- xjccc (@xjccc)
- Sam Blowes (@blowsie)
- Nimit012 (@Nimit012)
- Camille Coutens (@Kamsou)
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 is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
- [ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Renovate Bot (Logs).
Preview deployed to https://b5d3fd07.academy-preview.pages.dev (total size: 15M)