Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

元标签

管理您的元标签,从 Nuxt 2 迁移到 Nuxt 3。

Nuxt 3 提供了几种不同的方法来管理您的元标签

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

您可以自定义 titletitleTemplatebasescriptnoscriptstylemetalinkhtmlAttrsbodyAttrs

Nuxt 目前使用 vueuse/head 来管理您的元标签,但实现细节可能会发生变化。
文档 > 入门 > SEO 元标签 中了解更多信息。

迁移

  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>
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` receives the nuxt app but cannot access the component instance
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.'
      }]
    }
  }
})
</script>