[Snyk] Upgrade nuxt from 3.12.4 to 4.2.1 #320
Open
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.
Snyk has created this PR to upgrade nuxt from 3.12.4 to 4.2.1.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 47 versions ahead of your current version.
The recommended version was released a month ago.
Issues fixed by the recommended upgrade:
SNYK-JS-VITE-9512410
SNYK-JS-VITE-9653016
SNYK-JS-CROSSSPAWN-8303230
SNYK-JS-GLOB-14040952
SNYK-JS-NODEFORGE-14125745
SNYK-JS-NUXT-9486043
SNYK-JS-UNDICI-8641354
SNYK-JS-BABELHELPERS-9397697
SNYK-JS-VITE-13644406
SNYK-JS-VITE-8023174
SNYK-JS-VITE-8648411
SNYK-JS-VITE-9576207
SNYK-JS-VITE-9685035
SNYK-JS-VITE-9919777
SNYK-JS-JSYAML-13961110
SNYK-JS-KOA-10944994
SNYK-JS-MICROMATCH-6838728
SNYK-JS-NANOID-8492085
SNYK-JS-NANOID-8492085
SNYK-JS-NODEFORGE-14125097
SNYK-JS-NUXTDEVTOOLS-13849298
SNYK-JS-NUXTVITEBUILDER-8663232
SNYK-JS-PARSEGITCONFIG-9403763
SNYK-JS-PATHTOREGEXP-7925106
SNYK-JS-ROLLUP-8073097
SNYK-JS-VITE-8022916
SNYK-JS-BRACEEXPANSION-9789073
SNYK-JS-BRACEEXPANSION-9789073
SNYK-JS-DEVALUE-12205530
SNYK-JS-KOA-8720152
SNYK-JS-KOA-9679272
SNYK-JS-NODEFORGE-14114940
SNYK-JS-NUXT-12878602
SNYK-JS-SEND-7926862
SNYK-JS-SERVESTATIC-7926865
SNYK-JS-SIRV-12558119
SNYK-JS-UNDICI-10176064
SNYK-JS-VITE-12558116
Release notes
Package name: nuxt
✅ Upgrading
Our recommendation for upgrading is to run:
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
compare changes
🩹 Fixes
ImportPresetWithDeprecation(#33596)<nuxt-error-overlay>iframe border (#33625)moduleEntryPaths(#33628)optimizeDepsconfig is applied before other plugins (#33586)pages:resolved(#33662)vite-node(#33663)💅 Refactors
📖 Documentation
pendingas alias ofstatus === 'pending'(#33221)cookieStoreistrueby default (#33572)useHead/useHydration/useLazy*(#33626)🏡 Chore
verifyDepsBeforeRun: install(#33603)🤖 CI
❤️ Contributors
👀 Highlights
We're excited to announce Nuxt 4.2, bringing new capabilities for better TypeScript DX, enhanced error handling, and improved control over data fetching! 🎉
🎯 Abort Control for Data Fetching
You can now use
AbortControllersignals directly withinuseAsyncData, giving you fine-grained control over request cancellation (#32531).This works by passing an internal signal to your
useAsyncDatahandlerto cancel any promise that can be canceled, such as$fetch.const controller = new AbortController()
const { data, error, clear, refresh } = await useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', {
signal
}))
refresh() // will actually cancel the $fetch request (if dedupe: cancel)
refresh() // will actually cancel the $fetch request (if dedupe: cancel)
refresh()
clear() // will cancel the latest pending handler
</script>
You also pass an
AbortControllersignal directly torefresh/execute, giving you fine-grained control over request cancellation. This is particularly useful when you need to abort requests based on user actions or component lifecycle events.// Abort an ongoing refresh
const abortController = new AbortController()
refresh({ signal: abortController.signal })
// Later...
abortController.abort()
🎨 Better Error Pages in Development
When an error occurs during development, Nuxt will now display both your custom error page and a detailed technical error overlay (#33359). This gives you the best of both worlds – you can see what your users will experience while also having immediate access to stack traces and debugging information.
The technical overlay appears as a toggleable panel that doesn't interfere with your custom error page, making it easier to debug issues while maintaining a realistic preview of your error handling.
🔮 Opt-in Vite Environment API
For those wanting to experiment with cutting-edge features, you can now opt into the Vite Environment API (#33492).
The Vite Environment API is a major architectural improvement in Vite 6. It closes the gap between development and production by allowing the Vite dev server to handle multiple environments concurrently (rather than requiring multiple Vite dev servers, as we have done previously in Nuxt).
This should improve performance when developing and eliminate some edge case bugs.
... and it is the foundation for implementing Nitro as a Vite environment, which should speed up the dev server still further, as well as allowing more greater alignment in development with your Nitro preset.
This is also the first breaking change for Nuxt v5. You can opt in to these breaking changes by setting
compatibilityVersionto5:Please only use this for testing, as this opts in to unlimited future breaking changes, including updating to Nitro v3 once we ship the Nuxt integration.
Warning
This is highly experimental and the API may change. Only enable if you're prepared for potential breaking changes and want to help shape the future of Nuxt!
📦 New
@ nuxt/nitro-serverPackageWe've extracted Nitro server integration into its own package:
@ nuxt/nitro-server(#33462). This architectural change allows for different Nitro integration patterns and paves the way for future innovations in server-side rendering.While this change is mostly internal, it's part of our ongoing effort to make Nuxt more modular and flexible. The new package provides standalone Nitro integration and sets the foundation for alternative integration approaches (such as using Nitro as a Vite plugin in Nuxt v5+).
Note
This is an internal refactor – no changes should be required in your code.
⚡ Performance Improvements
We've also shipped several performance enhancements:
📉 Async Data Handler Extraction
One of the most exciting performance improvements is the new experimental async data handler extraction (#33131). When enabled, handler functions passed to
useAsyncDataanduseLazyAsyncDataare automatically extracted into separate chunks and dynamically imported.This is particularly effective for prerendered static sites, as the data fetching logic is only needed at build time and can be completely excluded from the client bundle.
Note
In testing with a previous version of nuxt.com, this feature reduced JavaScript bundle size by 39%! Of course, your mileage may vary depending on how much data fetching logic you have.
// This handler will be extracted into a separate chunk
// and only loaded when needed
const { data: post } = await useAsyncData('post', async () => {
const content = await queryContent(
</span><span class="pl-s">/blog/${<span class="pl-smi">route</span>.<span class="pl-smi">params</span>.<span class="pl-smi">slug</span>}</span><span class="pl-s">).findOne()// Complex data processing that you don't want in the client bundle
const processed = await processMarkdown(content)
const related = await findRelatedPosts(content.tags)
return {
...processed,
related
}
})
</script>
For static/prerendered sites, enable it in your config:
The extracted handlers are then tree-shaken from your client bundle when prerendering, as the data is already available in the payload. This results in significantly smaller JavaScript files shipped to your users.
🔧 Experimental TypeScript Plugin Support
We're introducing experimental support for enhanced TypeScript developer experience through the
@ dxup/nuxtmodule.This module adds a number of TypeScript plugins that aim to improve your experience when using Nuxt-specific features:
import(\~/assets/${name}.webp`)`$fetch,useFetch,useLazyFetch)@ dxup/unimportplugin for better navigation with auto-imported composables and utilitiesNote
Read more in the documentation.
To enable this feature, set
experimental.typescriptPlugintotruein your Nuxt configuration:Once enabled, the module will be automatically installed and configured by Nuxt.
Important
This feature also requires selecting the workspace TypeScript version in VS Code. Run the "TypeScript: Select TypeScript Version" command and choose "Use Workspace Version".
🎁 Other Improvements
declarationPath– You can now specify a custom declaration path for components (#33419)resolveModulenow accepts anextensionsoption (#33328)setGlobalHeadutility in kit for easier head management (#33512)🩹 Important Fixes
routeRules(#33222)loadNuxtConfigwith proper cleanup (#33420)hrefnow works correctly in<NuxtLink>(c69e4c30d)h()function (#33509)✅ Upgrading
Our recommendation for upgrading is to run:
This will refresh your lockfile and pull in all the latest dependencies that Nuxt relies on, especially from the unjs ecosystem.
👉 Changelog
compare changes
🚀 Enhancements
declarationPath(#33419)extensionsoption forresolveModule(#33328)useAsyncData(#32531)future.compatibilityVersionto5(22f4693a1)setGlobalHeadutility (#33512)🔥 Performance
🩹 Fixes
routeRules(#33222)loadNuxtConfigin concurrent calls (#33420)hrefin<NuxtLink>(c69e4c30d)mergeModelsfrom auto imports (#33344)shortPathproperty (#33384)declarationPathfrom component dirs (191bcb7e9)isPrerenderedcheck (#33476)h()(#33509)NuxtTimerelative timenumericprop (#33552)NuxtTimerelative timerelativeStyleprop (#33557)optimizeDeps.includefor server environment (#33550)💅 Refactors
shortPathproperty (#33384)extend,extendConfig, andconfigResolvedhooks (e060b9695)@ nuxt/nitro-serverpackage (#33462)RouteLocationNormalizedLoadedGenericinternally (b51cb3067)📖 Documentation
addServerPluginnote (#33409)declarationPathinaddComponent(#33380)getLayerDirectories()instead ofnuxt.options._layers(#33484)4.xprefix (5c0bb9285)moduleDependencies(#33499)🏡 Chore
test:prepare(6ef632b82)test:prepare(eca36cfe5)vue-demifromignoredBuiltDependencies(#33494)sincein nightly releases (74ca73ca1)@ rollup/plugin-commonjs(cd12980ce)✅ Tests
🤖 CI
@ nuxt/nitro-serveron pkg-pr-new (b7ccf17bf)❤️ Contributors
✅ Upgrading
Our recommendation for upgrading is to run:
This will deduplicate your lockfile as w...