Мета-теги

Управление мета-тегами, от 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 > 3 X > Getting Started > Seo Meta.

Миграция

  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>
  1. Убедитесь, что вы используете прописные буквы для этих имен компонентов, чтобы отличать их от нативных элементов HTML ( вместо <title>).
  2. Вы можете размещать эти компоненты в любом месте шаблона вашей страницы.

Параметры API

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