通过 100+ 条技巧学习 Nuxt!

元标签

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

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

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

您可以自定义 titletitleTemplatebasescriptnoscriptstylemetalinkhtmlAttrsbodyAttrs

Nuxt 目前使用 Unhead 来管理您的元标签,但实现细节可能会更改。
文档 > 入门 > 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>
// 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>