元标签
了解如何从 Nuxt 2 迁移到 Nuxt Bridge 新元标签。
如果您需要使用 head
访问组件状态,您应该迁移到使用 useHead
。
如果您需要使用选项 API,可以在使用 defineNuxtComponent
时使用 head()
方法。
迁移
bridge.meta
设置
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
nitro: false // 如果迁移到 Nitro 完成,将其设置为 true
}
})
更新头部属性
在您的 nuxt.config
中,将 head
重命名为 meta
。 (请注意,对象不再具有用于去重的 hid
键。)
export default {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '元描述' }
]
}
}
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: '元描述' }
]
}
}
})
useHead
组合式 API
Nuxt Bridge 提供了一个新的 Nuxt 3 元 API,可以通过新的 useHead
组合式 API 访问。
<script setup lang="ts">
useHead({
title: '我的 Nuxt 应用',
})
</script>
我们建议不要在使用
useHead
的同时使用原生 Nuxt 2 的 head()
属性,因为它们可能会冲突。有关如何使用此组合式 API 的更多信息,请查看 文档。
选项 API
<script>
// 如果使用选项 API 的 `head` 方法,您必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` 接收 Nuxt 应用但无法访问组件实例
return {
meta: [{
name: 'description',
content: '这是我的页面描述。'
}]
}
}
})
</script>
可能的重大变化:
head
接收 Nuxt 应用但无法访问组件实例。如果您的 head
中的代码尝试通过 this
或 this.$data
访问数据对象,您需要迁移到 useHead
组合式 API。标题模板
如果您想使用函数(以获得完全控制),那么这不能在您的 nuxt.config 中设置,而是推荐在 /layouts
目录下进行设置。
layouts/default.vue
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - 网站标题` : '网站标题';
}
})
</script>