Meta标签
学习如何从Nuxt 2迁移到Nuxt Bridge的新meta标签。
如果你需要使用head访问组件状态，你应该迁移到使用useHead。
如果你需要使用Options API，你可以在使用defineNuxtComponent时使用head()方法。
迁移
设置bridge.meta
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
nitro: false // 如果迁移到Nitro已经完成，设置为true
}
})
更新head属性
在你的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: 'Meta description' }
]
}
}
useHead组合函数
Nuxt Bridge提供了一个新的Nuxt 3 meta API，可以通过新的useHead组合函数访问。
<script setup lang="ts">
useHead({
title: 'My Nuxt App',
})
</script>
我们建议不要同时使用原生Nuxt 2的
head()属性和useHead，因为它们可能会冲突。要了解更多关于如何使用这个组合函数的信息，参见文档。
Options API
<script>
// 如果使用Options API的`head`方法，你必须使用`defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head`接收Nuxt应用程序，但无法访问组件实例
return {
meta: [{
name: 'description',
content: 'This is my page description.'
}]
}
}
})
</script>
标题模板
如果你想使用一个函数（以获得完全的控制权），那么它不能在你的nuxt.config中设置，而是建议在你的/layouts目录中设置。
layouts/default.vue
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>