Мета-теги

Мета-теги и `useHead` в Nuxt Bridge — миграция с подходов Nuxt 2.

Если нужен доступ к состоянию компонента из head, перейдите на useHead.

При Options API можно по-прежнему использовать метод head() вместе с defineNuxtComponent.

Миграция

Установите bridge.meta

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    meta: true,
    nitro: false, // Если миграция на Nitro завершена, установите значение true
  },
})

Обновление свойств head

В вашем nuxt.config переименуйте head в meta. (Обратите внимание, что объекты больше не имеют ключа hid для удаления дубликатов.)

export default {
  head: {
    titleTemplate: '%s - Nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Мета-описание' },
    ],
  },
}

Композабл useHead

Nuxt Bridge предоставляет API метаданных в духе Nuxt 3 — к нему ведёт композабл useHead.

<script setup lang="ts">
useHead({
  title: 'Моё приложение Nuxt',
})
</script>
Композабл useHead внутри опирается на @unhead/vue, а не на vue-meta, и управляет содержимым <head>.
Не используйте одновременно нативный head() Nuxt 2 и useHead — возможны конфликты.

Подробнее о метаданных: useHead, useSeoMeta.

Параметры API

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

Шаблон заголовка

Если нужен полный контроль через функцию, задавайте шаблон заголовка не в nuxt.config, а в лейауте (каталог layouts/).

layouts/default.vue
<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Заголовок сайта` : 'Заголовок сайта'
  },
})
</script>