元标签

管理你的元标签,从 Nuxt 2 到 Nuxt 3。

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

  1. 通过你的 nuxt.config
  2. 通过 useHead 组合式函数
  3. 通过 全局元组件

你可以自定义 titletitleTemplatebasescriptnoscriptstylemetalinkhtmlAttrsbodyAttrs

Nuxt 目前使用 Unhead 来管理你的元标签,但实现细节可能会改变。
Read more in Docs > Getting Started > Seo Meta.

迁移

  1. 在你的 nuxt.config 中,将 head 重命名为 meta。也可以考虑将这些共享的元配置移到你的 app.vue 中。(注意对象不再有 hid 键用于去重。)
  2. 如果你需要通过 head 访问组件状态,应迁移使用 useHead ,也可以考虑使用内置的元组件。
  3. 如果你需要使用 Options API,当你用 defineNuxtComponent 时,可以使用 head() 方法。

useHead

<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 提供,拥有类似的功能。

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

Options API

Nuxt 3 (Options API)
<script>
// 如果使用 Options API 的 `head` 方法,必须使用 `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` 接收 nuxt 应用实例,但无法访问组件实例
    return {
      meta: [{
        name: 'description',
        content: '这是我的页面描述。'
      }]
    }
  }
})
</script>