Мета-теги

Nuxt 3 предоставляет несколько способов управления мета-тегами:

1. Через ваш nuxt.config.
2. С помощью композабла useHead
3. С помощью глобальных компонентов мета-тегов

Вы можете настраивать title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs и bodyAttrs.

Миграция

1. В nuxt.config, переименуйте head в meta. Рассмотрите возможность перемещения этой общей конфигурации мета-тегов в app.vue. (Обратите внимание, что объекты больше не имеют ключа hid для устранения дубликатов.)
2. Если вам нужен доступ к состоянию компонента с помощью head, вам следует мигрировать на использование useHead. Вам также может быть полезно использовать встроенные мета-компоненты.
3. Если вам нужно использовать Options API, есть метод head(), который вы можете использовать при использовании defineNuxtComponent.

useHead

<script>
export default {
  data: () => ({
    title: 'Мое приложение',
    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: 'Мое приложение',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'Описание моего приложения'
      }]
    }
  }
}
</script>

Параметры API

<script>
// если используется метод `head` Options API, необходимо использовать `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` получает приложение nuxt, но не может получить доступ к экземпляру компонента
    return {
      meta: [{
        name: 'description',
        content: 'Это описание моей страницы.'
      }]
    }
  }
})
</script>