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