Nuxt 3 ra mắt cùng với rất nhiều sự thay đổi cả về công nghệ lẫn cách sử dụng. Để nói một cách chi tiết thì rất dài nên mình chỉ đưa ra những điều tổng quát nhất thôi. Về cú pháp viết các component trong Nuxt 3 thì mình không nhắc đến nữa vì Nuxt 3 thừa kế từ Vue 3 mà nên phạm trù này mình nghĩ thuộc Vue 3 nhiều hơn.
Giờ thì vào việc thôi.
Auto import
Auto import là một tính năng mới được Nuxt 3 phát triển và mình thấy nó khá là tiện. Tất cả các file trong components, composables, untils đều được tự động nhận diện và chỉ cần gọi tên component, composables,.. mà không cần phải import lại nữa. Rất tiện đúng không nào !
Auto import được bật mặc định nhưng cũng có thể tắt đi trong file nuxt.config.ts như sau:
1 2 3 4 5 6 | export default defineNuxtConfig({ imports: { autoImport: false } }) |
Meta và Seo
Ở nuxt 3 cách viết và sử dụng thẻ meta đã được thay đổi một chút. Có 3 cách để mọi người có thể sử dụng, quản lý thẻ meta của mình là:
1. Dùng thẻ meta ngay trong template như một thẻ html
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. Sử dụng useHead, useServerSeoMeta, useSeoMeta
- useHead dùng để định nghĩa thêm phần head cho trang web của bạn. Ví dụ:
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> |
Ở trên chỉ là cách sử dụng đơn giản thôi. useHead còn rất nhiều các thuộc tính hỗ trợ chúng ta cho việc định nghĩa head của trang web nữa. Để xem chi tiết các bạn có thể tìm hiểu ở đây https://nuxt.com/docs/migration/meta
- useServerSeoMeta và useSeoMeta dùng để xác định các thẻ meta của mình theo dạng đối tượng giống như useHead. useSeoMeta và useServerSeoMeta về cơ bản thì giống nhau chỉ khác nhau ở chỗ useServerSeoMeta được chạy duy nhất một lần và nó diễn ra ở server. Với mode Server-side rendering của Nuxt thì dùng cái này sẽ đem lại hiệu suất tốt hơn so với useSeoMeta vì đằng nào khi ta load trang, html sẽ được render phía server và trả lại kết quả cho client nên việc sử dụng Seo meta ở phía client không còn cần thiết nữa và google cũng chỉ quét qua trang web của chúng ta một lần thôi mà. Cách sử dụng thì cũng không có gì đặc biệt nó tương tự với 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', }) |
Để biết thêm chi tiết về các thuộc tính của useSeoMeta và useServerSeoMeta các bạn có thể tham khảo ở đây nhé https://unhead.harlanzw.com/guide/composables/use-seo-meta.
3. Sử dụng với options api:
Cách sử dụng này thì trông code nó sẽ hơi tương tự 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 tự động import các file bên trong thư mục plugins mà không cần phải import. Trong trường hợp bạn có các thư mục con chứa các file plugin trong thư mục plugins thì nuxt sẽ không nhận diện được các file đó. Lúc này bạn sẽ phải đăng kí các plugins này trong nuxt.config.ts cách đăng ký thì vẫn giống với cách đăng ký trong Nuxt 2.
Khai báo plugin:
Có 2 cách để khai báo plugin.
Khai báo đơn thuần:
Cách khai báo này giống với Nuxt 2 chỉ thay đổi một chút về cú pháp. Giả sử mình có ví dụ về chức năng tích hợp google analytics cho 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 ) }) |
Khai báo plugin giờ chỉ nhận duy nhất một tham số đầu vào là nuxtApp. Các bạn có thể tìm hiểu thêm để biết về các method cũng như property của nuxtApp tại đây https://nuxt.com/docs/api/composables/use-nuxt-app#usenuxtapp
Khai báo theo kiểu đối tượng:
Riêng kiểu khai báo này thì chỉ có Nuxt 3 mới:
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: { ....... } }) |
Tùy nhu cầu sử dụng mà chúng ta có thể dùng cách 1 hoặc cách 2
Tính năng mới của plugin
1. Cung cấp helper một cách dễ dàng
1 2 3 4 5 6 7 8 | export default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!` } } }) |
Để sử dụng thì chỉ cần:
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. Cung cấp directive cho ứng dụng:
1 2 3 4 5 6 7 8 | export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive('focus', { mounted (el) { el.focus() } }) }) |
Trên đây mình cũng đã giới thiệu một phần về các thay đổi của Nuxt 3 so với Nuxt 2. Vì còn khá nhiều nên mình sẽ tách ra thành nhiều phần. Có thời gian mình sẽ lại giới thiệu với các bạn tiếp.
Phần 1 cũng khá dài rồi nên mình sẽ kết thúc tại đây thôi. Trong quá trình viết khó tránh khỏi các sai sót mong được nhận sự góp ý từ các ban. Cảm ơn các bạn đã giành thời gian đọc nhé. Hẹn gặp lại các bạn trong một bài viết khác nhé !