foreword
Hello everyone, I am Liu Ming, a ten-year entrepreneurial veteran and open source technology enthusiast.
On April 11, 2023, the Nuxt development team released Nuxt version 3.4.0, and version 3.3.0 was released on March 14, that is to say, Nuxt released a new version in less than a month. Frequent version updates will cause many children's shoes to ask: Is it necessary to upgrade? My answer is:
upgrade if you need to use the features of the new version, and don't bother if you don't.
Today we will take a look at the new features of Nuxt3.4.
Feature 1: Support View Transition API
First of all, you need to understand the View Transition API.
The View Transition API is an experimental technology supported by Chrome 111 and above. The View Transition API will allow developers to easily update the DOM, generate animated transitions between different DOM states, and further change the content of the DOM, simplifying the development of single-page application switching screens.
In terms of browser support, only Chrome 111 and above are supported among major browsers, Edge is still under development, and Firefox and Safari are not yet supported.
open method
nuxt.config.tsAdd the following to the file
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
Feature 2: Simplify developer tool configuration
If there are children who like to use Nuxt to develop projects, they must be familiar with its supporting developer tool DevTools.
Now, opening DevTools is very simple, just nuxt.config.tsadd the following content to the file
export default defineNuxtConfig({
devtools: true
})
After this configuration, if you have not installed DevTools, Nuxt will remind you to install it locally.
Feature 3: Layer development and improvement
Layer is an innovative feature in Nuxt3. It is estimated that many children's shoes are not familiar with Layer.
We can understand Layer in this way:
Layer is a Nuxt sub-project that can be referenced by the Nuxt main project. The amazing thing is that the sub-project development method is almost exactly the same as the main project development method.
For more Layer descriptions, please refer to the Layer section of the official document.
Starting from Nuxt3.4, equal symbols can also be used instead of relative paths during Layer development ~/~~/@/@@ , which makes Layer development closer to Nuxt development.
Feature 4: The plug-in supports object syntax
Supporting object syntax in plugins allows for finer control over plugin load order and location.
The syntax is as follows:
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // or 'post'
async setup (nuxtApp) {
// this is the equivalent of a normal functional plugin
},
hooks: {
// You can directly register Nuxt app hooks here
'app:created'() {
const nuxtApp = useNuxtApp()
//
}
}
})
Some children's shoes may ask about the syntax of the previous plug-in, here I will give an example
export default defineNuxtPlugin(nuxtApp => {
// now available on `nuxtApp.$injected`
nuxtApp.provide('injected', () => 'my injected function')
// You can alternatively use this format, which comes with automatic type support
return {
provide: {
injected: () => 'my injected function'
}
}
})
You can see that it was a function syntax before, and now it is an object syntax. Regardless of whether children's shoes have written plug-ins, starting from v3.4.0, we recommend using object syntax to write.
Feature 5: Regular dependency changes
Every time a version is released, Nuxt's dependencies may do some version upgrades, this time including Consola v3and Nitropack v2.3.3.
upgrade
The upgrade of Nuxt is very simple, just use the following command
npx nuxi upgrade --force
If there are children's shoes with nuxi installed globally, the previous npx is not needed, just write as follows:
nuxi upgrade --force
epilogue
Going back to the question mentioned in the preface of the article, whether to upgrade to Nuxt 3.4.0 depends on whether the children's shoes have used the above-mentioned features. If not, then don't bother and make an easy program Isn't the staff better? However, if you want to learn these new features, then upgrade and give it a try!