Learn Nuxt with a Collection of 100+ Tips!

Мета-теги

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

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

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

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

В настоящее время Nuxt использует vueuse/head для управления мета-тегами, но детали реализации могут измениться.
Узнать больше Docs > 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>