元标签
管理您的元标签,从 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: 'My App',
description: 'My App 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: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
</script>
- 确保您对这些组件名称使用大写字母,以将其与原生 HTML 元素区分开来(
<Title>
而不是<title>
)。 - 您可以在页面模板中的任何位置放置这些组件。
Options API
Nuxt 3(Options API)
<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>