Nuxt 2 to Nuxt 3: Meta Tags
Nuxt 3 provides several different ways to manage your meta tags.
- Through your
nuxt.config
. - Through the
useHead
composable - Through global meta components
You can customize title
, titleTemplate
, base
, script
, style
, meta
, link
, htmlAttrs
and bodyAttrs
.
Migration
- In your
nuxt.config
, renamehead
tometa
. Consider moving this shared meta configuration into yourapp.vue
instead. (Note that objects no longer have ahid
key for deduplication.) - If you need to access the component state with
head
, you should migrate to usinguseHead
. You might also consider using the built-in meta-components.
Example: useHead
<script>export default { data: () => ({ title: 'My App', description: 'My App Description' }) head () { return { title: this.title, meta: [{ hid: 'description', name: 'description', content: this.description }] } }}</script>
Example: built-in meta-components
Nuxt 3 also provides meta components that you can use to accomplish the same task. While these components look similar to HTML tags, they are provided by Nuxt and have similar functionality.
<script>export default { head () { return { title: 'My App', meta: [{ hid: 'description', name: 'description', content: 'My App Description' }] } }}</script>