元标签
从 Nuxt 2 迁移到 Nuxt 3，管理你的元标签。
Nuxt 3 提供了几种不同的方法来管理你的元标签：
你可以自定义 title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs 和 bodyAttrs。
Nuxt 目前使用
vueuse/head 来管理你的元标签，但实现细节可能会有所变化。迁移
- 在你的
nuxt.config文件中，将head改为meta。考虑将这个共享的元标签配置移动到你的app.vue中。（注意，对象不再具有用于去重的hid键。） - 如果你需要通过
head访问组件状态，你应该迁移到使用useHead。你也可以考虑使用内置的元标签组件。 - 如果你需要使用 Options API，当你使用
defineNuxtComponent时，可以使用head()方法。
useHead
<script>
export default {
data: () => ({
title: '我的应用',
description: '我的应用描述'
}),
head () {
return {
title: this.title,
meta: [{
hid: 'description',
name: 'description',
content: this.description
}]
}
}
}
</script>
元标签组件
Nuxt 3 还提供了元标签组件，你可以使用它们来完成相同的任务。虽然这些组件看起来类似于 HTML 标签，但它们是由 Nuxt 提供的，并具有类似的功能。
<script>
export default {
head () {
return {
title: '我的应用',
meta: [{
hid: 'description',
name: 'description',
content: '我的应用描述'
}]
}
}
}
</script>
- 确保你使用大写字母来区分这些组件名称，以区别于原生的 HTML 元素（使用
<Title>而不是<title>）。 - 你可以在页面模板的任何位置放置这些组件。 ::
Options API
Nuxt 3 (Options API)
<script>
// 如果使用 Options API 的 `head` 方法，你必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` 接收到 nuxt app，但无法访问组件实例
return {
meta: [{
name: 'description',
content: '这是我的页面描述。'
}]
}
}
})
</script>