迁移到 Nuxt 3：元标签 v4

Maschinelle Übersetzung ·0 % geprüft

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

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

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

Nuxt 当前使用 Unhead 来管理你的元标签，但实现细节可能会改变。

Weitere Informationen findest du unter Docs > Getting Started > Seo Meta.

迁移

在你的 nuxt.config 中，将 head 重命名为 meta。可以考虑将这个共享的元配置移到 app.vue 中。（请注意，对象不再有用于去重的 hid 键。）
如果你需要通过 head 访问组件状态，则应迁移到使用 useHead。你也可以考虑使用内置的元组件。
如果你需要使用选项式 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>

<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')

// Dies ist reaktiv, wenn du oben den Titel oder die Beschreibung änderst
useHead({
  title,
  meta: [{
    name: 'description',
    content: description,
  }],
})
</script>

元组件

Nuxt 3 还提供了一些元组件，你可以使用它们来完成相同的任务。虽然这些组件看起来类似于 HTML 标签，但它们由 Nuxt 提供并具有相似的功能。

<script>
export default {
  head () {
    return {
      title: 'My App',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'My App Description',
      }],
    }
  },
}
</script>

<template>
  <div>
    <Head>
      <Title>My App</Title>
      <Meta
        name="description"
        content="My app description"
      />
    </Head>
    <!-- -->
  </div>
</template>

确保你对这些组件名称使用大写字母以将它们与原生 HTML 元素区分开（使用 <Title> 而不是 <title>）。
你可以将这些组件放在页面模板中的任何位置。

选项式 API

Nuxt 3 (Options API)

<script>
// Wenn du die `head`-Methode der Options API verwendest, musst du `defineNuxtComponent` verwenden
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` erhält die Nuxt-App, kann aber nicht auf die Komponenteninstanz zugreifen
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.',
      }],
    }
  },
})
</script>