The Christmas gift from the Nuxt team Nuxt 3 9 was released

Mondo Technology Updated on 2024-01-31

Hello everyone!Today I would like to introduce you to the Christmas gift from the Nuxt team - Nuxt 3Version 9!This release brings VITE 5, interactive server components, new composables, a new loading API, and many other new features. Article author Daniel Roe gave everyone holiday greetings and shared Nuxt 39 highlights.

nuxt 3.9. Support for Vite 5 and Rollup 4. If you're a user of a module, you may want to check that the VITE plugin you've created is compatible with these latest versions. This update brings many improvements and bug fixes, which you can learn more about in Vite's changelog.

This version has passed the latest Vue 34 release candidates were tested and configured accordingly to take advantage of Vue 3New in 4, including debugging hydration errors in production (just set debug: true in the nuxt config).

To get the edge, just play in v34. Update your vue version after release, or try a pre-release version today:

This is a highly experimental update, but now you can try interactive components in the nuxt server component. To enable this new feature, you will need to additionally enable the Component Islands feature in your configuration. 


// nuxt.config.tsexport default definenuxtconfig( }
Now, in the server component, you can use the nuxt-client directive to specify the component to hydrate:


// components/somecomponent.server.vue
The Nuxt team is now using Vite's new AST-Aware'define'Make a more precise substitution on the server side, which means that a ** like the following no longer throws an error:


// app.vue
The Nuxt team has introduced a new hook-based system for, including, for useloadingindicator composables, which allows you to control the stop state that starts loading. If you want, you can also hook to page:loading:start and page:loading:end. 


Sometimes you only want to run it once, no matter how many times you load the page, and if it's running on the server, you don't want to run it again on the client. To do this, the Nuxt team has a new tool: callonce. 


// app.vue
The Nuxt team has improved the error types returned by useasyncdata and usefetch to make them more accurate. 


The Nuxt team has made some performance optimizations in this release, so you'll notice that some things have gotten faster. 


The nuxt team recommends using the following command to upgrade:


nuxi upgrade
		

		

			
Related Pages