useHead

Source
Настройка свойств head для отдельных страниц приложения Nuxt.

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

Композабл useHead позволяет управлять тегами в <head> программно и реактивно с помощью Unhead. С его помощью можно настраивать мета-теги, ссылки, скрипты и другие элементы в секции <head> HTML-документа.

app/app.vue
<script setup lang="ts">
useHead({
  title: 'Моё приложение',
  meta: [
    { name: 'description', content: 'Мой замечательный сайт.' },
  ],
  bodyAttrs: {
    class: 'test',
  },
  script: [{ innerHTML: 'console.log(\'Привет, мир\')' }],
})
</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> {
  /** Обновляет запись; сначала сбрасывает побочные эффекты предыдущего 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.

Примеры

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

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

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

app/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>

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

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

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

Подключение внешних скриптов и стилей

app/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>

Атрибуты body и html

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

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