useHead

Исходный код
Композабл useHead задаёт содержимое `<head>` отдельных страниц приложения Nuxt.

Использование

Композабл useHead управляет тегами в <head> программно и реактивно на базе Unhead: мета-теги, ссылки, скрипты и другие элементы документа.

app.vue
<script setup lang="ts">
useHead({
  title: 'Моё приложение',
  meta: [
    { name: 'description', content: 'Мой замечательный сайт.' },
  ],
  bodyAttrs: {
    class: 'test',
  },
  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
})
</script>
Если данные приходят от пользователя или из другого недоверенного источника, используйте useHeadSafe.
Поля useHead могут быть динамическими: ref, computed, reactive. Параметр meta может быть функцией, возвращающей объект, чтобы сделать весь объект реактивным.

Тип

Signature
export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput>

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[]
  htmlAttrs?: HtmlAttributes
  bodyAttrs?: BodyAttributes
}

interface ActiveHeadEntry<Input> {
  /**
   * Обновляет запись новым вводом.
   *
   * Сначала снимает побочные эффекты предыдущего ввода.
   */
  patch: (input: Input) => void
  /**
   * Удаляет запись из активного head.
   *
   * Постановка побочных эффектов на удаление в очередь.
   */
  dispose: () => void
}

Более подробную информацию о типах см. в @unhead/schema.

Параметры

meta: объект с метаданными для <head>. Все поля поддерживают реактивные значения (ref, computed, reactive) или функцию, возвращающую объект метаданных.

СвойствоТипОписание
titlestringЗаголовок страницы.
titleTemplatestring | ((title?: string) => string)Шаблон заголовка: строка с %s или функция.
baseBaseТег <base>.
linkLink[]Массив объектов ссылок → <link>.
metaMeta[]Массив мета-объектов → <meta>.
styleStyle[]Массив объектов стилей → <style>.
scriptScript[]Массив объектов скриптов → <script>.
noscriptNoscript[]Массив объектов → <noscript>.
htmlAttrsHtmlAttributesАтрибуты тега <html>.
bodyAttrsBodyAttributesАтрибуты тега <body>.

Возвращаемые значения

Композабл ничего не возвращает. Метаданные регистрируются в Unhead, который обновляет DOM.

Примеры

Базовые мета-теги

pages/about.vue
<script setup lang="ts">
useHead({
  title: 'О нас',
  meta: [
    { name: 'description', content: 'Узнайте больше о нашей компании' },
    { property: 'og:title', content: 'О нас' },
    { property: 'og:description', content: 'Узнайте больше о нашей компании' },
  ],
})
</script>

Реактивные мета-теги

pages/profile.vue
<script setup lang="ts">
const profile = ref({ name: 'Иван Иванов' })

useHead({
  title: computed(() => profile.value.name),
  meta: [
    {
      name: 'description',
      content: computed(() => `Страница профиля: ${profile.value.name}`),
    },
  ],
})
</script>

Функция для полной реактивности

pages/dynamic.vue
<script setup lang="ts">
const count = ref(0)

useHead(() => ({
  title: `Счётчик: ${count.value}`,
  meta: [
    { name: 'description', content: `Текущее значение: ${count.value}` },
  ],
}))
</script>

Внешние скрипты и стили

pages/external.vue
<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'stylesheet',
      href: 'https://cdn.example.com/styles.css',
    },
  ],
  script: [
    {
      src: 'https://cdn.example.com/script.js',
      async: true,
    },
  ],
})
</script>

Атрибуты html и body

pages/themed.vue
<script setup lang="ts">
const isDark = ref(true)

useHead({
  htmlAttrs: {
    lang: 'ru',
    class: computed(() => isDark.value ? 'dark' : 'light'),
  },
  bodyAttrs: {
    class: 'themed-page',
  },
})
</script>
Узнать больше Docs > 3 X > Getting Started > Seo Meta.