Мета-теги

Миграция мета-тегов с Nuxt 2 на Nuxt Bridge.

Если нужен доступ к состоянию компонента в 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 в app.head. (Ключ 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: 'Meta description' },
    ],
  },
}

Композабл useHead

Nuxt Bridge предоставляет API мета Nuxt 3 через композабл useHead.

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

Подробнее: документация.

Поддержка Options API

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

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

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

app/layouts/default.vue
<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Название сайта` : 'Название сайта'
  },
})
</script>