元标签 Meta Tags

Nuxt3迁移指南 - 元标签

Nuxt 3 提供了几种不同的方式来管理你的元标签。

  1. 通过你的nuxt.config。
  2. 通过 useHead 可组合
  3. 通过全局元组件

您可以自定义 title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs 和 bodyAttrs。

Nuxt 目前使用 vueuse/head 来管理您的元标记，但实现细节可能会发生变化。

阅读有关元标记的更多信息。

迁移

  1. 在你的 nuxt.config 中，将 head 重命名为 meta。 考虑将此共享元配置移至您的 app.vue 中。(请注意，对象不再具有用于重复数据删除的“隐藏”键。)
  2. 如果您需要使用 head 访问组件状态，您应该迁移到使用 useHead。 您也可以考虑使用内置的元组件。
  3. 如果需要使用Options API，在使用defineNuxtComponent时有一个head()方法可以使用。

Example: useHead

vue
Nuxt 2
vue
<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 提供并且具有相似的功能。

vue
Nuxt 2
vue
<script>
export default {
  head() {
    return {
      title: 'My App',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'My App Description'
      }]
    }
  }
}
</script>
  1. 确保对这些组件名称使用大写字母，以将它们与原生 HTML 元素区分开来(<Title> 而不是 <title>)。
  2. 您可以将这些组件放置在页面模板中的任何位置。

Example: Options API

Nuxt 3 (Options API)
vue
<script>
// 如果使用选项 API `head` 方法，您必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
  head(nuxtApp) {
    // `head` 接收到 nuxt 应用程序但无法访问组件实例
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.'
      }]
    }
  }
})
</script>