v3.17
GitHub

元标签

了解如何从 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: '元描述' }
    ]
  }
}

useHead 组合式 API

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

<script setup lang="ts">
useHead({
  title: '我的 Nuxt 应用',
})
</script>
这个 useHead 组合式 API 在内部使用 @unhead/vue（而不是 vue-meta）来操作您的 <head>。
我们建议不要在使用 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>