v3.4.0 #20208
Replies: 5 comments 6 replies
-
I get the following error: Any ideas? I have deleted |
Beta Was this translation helpful? Give feedback.
-
try.js:58 Error while mounting app: TypeError: Cannot create proxy with a non-object as target or handler |
Beta Was this translation helpful? Give feedback.
-
With
|
Beta Was this translation helpful? Give feedback.
-
Thanks for the new release, Nuxt team! 💚 |
Beta Was this translation helpful? Give feedback.
-
👀 Highlights
🪄 View Transitions API Support
CleanShot.2023-04-11.at.18.00.47.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.
✨ Payload Enhancements
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.
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
andshallowReactive
.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:
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 fromuseAsyncData
or manually injected vianuxtApp.payload
. It does not affect data fetched from Nitro server routes via$fetch
oruseFetch
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.🎁 Object-syntax Nuxt plugins
We now support object-syntax Nuxt plugins for better control over plugin order and easier registration of hooks.
In future we plan to enable build optimizations based on the metadata you pass in your Nuxt plugins.
🛠️ Easier Devtools Configuration
It's even easier to enable Nuxt DevTools in your project: just set
devtools: true
in yournuxt.config
file to enable devtools.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 🙏
📚 Layers Improvements
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.
🧸 Better Context Transforms
We now transform certain keys of
definePageMeta
anddefineNuxtComponent
which means you should have fewer issues with a missing Nuxt instance. This includes support accessing the Nuxt instance after anawait
withinasyncData
andsetup
functions for those still using the Options API. And you no longer need to wrapmiddleware
andvalidate
withdefineNuxtRouteMiddleware
when using async functions.♻️ Ecosystem Updates
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).
🚨 'Breaking fixes'
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 settingexperimental.respectNoSSRHeader
to true. Alternatively, you can setevent.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 withexperimental.polyfillVueUseHead
.)experimental.viteNode
option. It can be configured instead withvite.devBundler
.public
key. This was an undocument compatibility measure with Nuxt 2 and we plan to remove it entirely in v3.5.✅ 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.
With Nuxt v3.4.0, we now advise that you explicitly install the
@types/node
version that matches your Node version.👉 Changelog
see full changelog
This discussion was created from the release v3.4.0.
Beta Was this translation helpful? Give feedback.
All reactions