v3.16
Nuxt on GitHub

元标签

学习如何从Nuxt 2迁移到Nuxt Bridge的新元标签。

如果您需要通过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: '元描述' }
    ]
  }
}

useHead 组合式API

Nuxt Bridge提供了新的Nuxt 3元标签API，可通过新的useHead组合式API访问。

<script setup lang="ts">
useHead({
  title: '我的Nuxt应用',
})
</script>
此useHead组合式API在底层使用@unhead/vue（而非vue-meta）来操作您的<head>。
我们建议不要同时使用原生的Nuxt 2 head()属性和useHead，因为它们可能会发生冲突。

有关如何使用此组合式API的更多信息，请参阅文档。

Options API

<script>
// 如果使用Options 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>