Nuxt 3 was released with a lot of changes in both technology and usage. To talk in detail is very long, so I will only give the most general things. Regarding the syntax of writing components in Nuxt 3, I don’t mention it anymore because Nuxt 3 inherits from Vue 3, so this category I think belongs to Vue 3 more. Now let’s get to work.
Auto import
Auto import is a new feature developed by Nuxt 3 and I find it quite convenient. All files in components, composables, untils are automatically recognized and just need to name the component, composables,.. without having to import again. Very convenient, isn’t it! Auto import is enabled by default but can also be turned off in the nuxt.config.ts file as follows:
1 2 3 4 5 6 | export default defineNuxtConfig({ imports: { autoImport: false } }) |
Meta and Seo
In nuxt 3 the way to write and use the meta tag has been changed a bit. There are 3 ways that people can use and manage their meta tags:
1. Use the meta tag right in the template as an html tag
1 2 3 4 5 6 7 8 9 | <template> <div> <Head> <Title>My App</Title> <Meta name="description" content="My app description"/> </Head> </div> </template> |
2. Use useHead, useServerSeoMeta, useSeoMeta
- useHead is used to define an additional head section for your website. For example:
1 2 3 4 5 6 7 8 9 10 11 12 | <script setup> const title = ref('My App') const description = ref('My App Description') useHead({ title, meta: [{ name: 'description', content: description }] }) </script> |
The above is just a simple usage. useHead has a lot of attributes that help us define the head of the web page as well. For details, you can find out here https://nuxt.com/docs/migration/meta
- useServerSeoMeta and useSeoMeta are used to define their meta tags in the same object form as useHead. useSeoMeta and useServerSeoMeta are essentially the same, the only difference is that useServerSeoMeta is run only once and it happens at the server. With Nuxt’s Server-side rendering mode, using this will bring better performance than useSeoMeta because anyway when we load the page, the html will be rendered server-side and return the results to the client, so using Seo meta in The client side is no longer needed and google only scans our site once. Usage is nothing special it is similar to useHead:
1 2 3 4 5 6 7 8 9 | useServerSeoMeta({ title: 'About', description: 'My about page', ogDescription: 'Still about my about page', ogTitle: 'About', ogImage: 'https://example.com/image.png', twitterCard: 'summary_large_image', }) |
For more details about the properties of useSeoMeta and useServerSeoMeta you can refer here https://unhead.harlanzw.com/guide/composables/use-seo-meta .
3. Use with options api:
Using this, the code will look a bit similar to Nuxt 2
1 2 3 4 5 6 7 8 9 10 11 | export default defineNuxtComponent({ head (nuxtApp) { return { meta: [{ name: 'description', content: 'This is my page description.' }] } } }) |
Plugins
Nuxt automatically imports the files inside the plugins folder without having to import. In case you have subfolders containing plugin files in the plugins folder then nuxt will not recognize those files. At this point you will have to register these plugins in nuxt.config.ts, the way to register is still the same as the way to register in Nuxt 2.
Plugin declaration:
There are two ways to declare a plugin.
Simple declaration:
This declaration is similar to Nuxt 2, only slightly changed in syntax. Let’s say I have an example of a function that integrates google analytics for an app
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import VueGtag from 'vue-gtag' export default defineNuxtPlugin((nuxtApp) => { const config = useRuntimeConfig() nuxtApp.vueApp.use( VueGtag, { config: { id: config.analyticsTrackId, }, }, nuxtApp.$router ) }) |
The plugin declaration now accepts only one input parameter, nuxtApp. You can learn more about nuxtApp methods and properties here https://nuxt.com/docs/api/composables/use-nuxt-app#usenuxtapp
Declare by object type:
Particularly for this type of declaration, only Nuxt 3 is new:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import VueGtag from 'vue-gtag' export default defineNuxtPlugin({ name: 'my-plugin', enforce: 'pre', async setup (nuxtApp) { const config = useRuntimeConfig() nuxtApp.vueApp.use( VueGtag, { config: { id: config.analyticsTrackId, }, }, nuxtApp.$router ) }, hooks: { ....... } }) |
Depending on our needs, we can use method 1 or method 2
New feature of the plugin
1. Provide helper easily
1 2 3 4 5 6 7 8 | export default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!` } } }) |
To use it, just:
1 2 3 4 5 6 7 8 9 10 | <template> <div> {{ $hello('world') }} </div> </template> <script setup lang="ts"> // Hoặc có thể sử dụng ở đây const { $hello } = useNuxtApp() </script> |
2. Provide directives for the application:
1 2 3 4 5 6 7 8 | export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive('focus', { mounted (el) { el.focus() } }) }) |
Above, I also introduced a part about the changes of Nuxt 3 compared to Nuxt 2. Since there are still many, I will separate it into several parts. When I have time, I will introduce to you again. Part 1 is already quite long, so I’ll end it here. In the process of writing, it is difficult to avoid errors. Looking forward to receiving comments from the boards. Thank you for taking the time to read. See you in another post!