Мета-теги

Управление мета-тегами при переходе с Nuxt 2 на Nuxt 3.

В Nuxt 3 мета-теги можно задавать так:

  1. В nuxt.config.
  2. Через композабл useHead.
  3. Через глобальные мета-компоненты.

Доступны: title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs, bodyAttrs.

Nuxt использует Unhead для управления мета-тегами; детали реализации могут меняться.
Узнать больше Docs > 4 X > 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: 'Моё приложение',
    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>
  1. Используйте заглавные буквы в именах компонентов, чтобы отличать их от нативных HTML-элементов (<Title>, а не <title>).
  2. Эти компоненты можно размещать в любом месте шаблона страницы.

Поддержка Options API

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