Миграция на 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 в 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, так как они могут конфликтовать.

Для получения дополнительной информации о том, как использовать этот композиционный API, см. документацию.

Параметры API

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

Возможное изменение, влияющее на работоспособность: head получает приложение Nuxt, но не может получить доступ к экземпляру компонента. Если код в вашем head пытается получить доступ к объекту данных через this или this.$data, вам необходимо мигрировать на композабл useHead.

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

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

layouts/default.vue

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

Новый Composition API

Nuxt Bridge реализует композаблы, совместимые с Nuxt 3.

Runtime Config

Nuxt предоставляет API конфигурации runtime для раскрытия конфигурации и секретов внутри вашего приложения.

Мета-теги