Nuxt 3 provides several different ways to manage your meta tags:
nuxt.config.useHead composableYou can customize title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs and bodyAttrs.
Unhead to manage your meta tags, but implementation details may change.nuxt.config, rename head to meta. Consider moving this shared meta configuration into your app.vue instead. (Note that objects no longer have a hid key for deduplication.)head, you should migrate to using useHead . You might also consider using the built-in meta-components.head() method you can use when you use defineNuxtComponent.<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>
<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')
// This will be reactive when you change title/description above
useHead({
title,
meta: [{
name: 'description',
content: description,
}],
})
</script>
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>
<template>
<div>
<Head>
<Title>My App</Title>
<Meta
name="description"
content="My app description"
/>
</Head>
<!-- -->
</div>
</template>
<Title> rather than <title>).<script>
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` receives the nuxt app but cannot access the component instance
return {
meta: [{
name: 'description',
content: 'This is my page description.',
}],
}
},
})
</script>