Head

Source
Управление конфигурацией head в модулях.

setGlobalHead

Задаёт глобальную конфигурацию head для приложения Nuxt. Модули могут программно добавлять мета-теги, ссылки, скрипты и другие элементы, которые будут применяться на всех страницах.

Переданная конфигурация объединяется с существующей (глубокое слияние), при конфликте приоритет у переданных значений.

Удобно для модулей, которым нужно добавить глобальные мета-теги, стили или скрипты в head.

Тип

// @errors: 2391
// ---cut---
import type { SerializableHead } from '@unhead/vue/types'

interface AppHeadMetaObject extends SerializableHead {
  charset?: string
  viewport?: string
}

function setGlobalHead (head: AppHeadMetaObject): void

Параметры

head

Тип: AppHeadMetaObject

Объект с конфигурацией head. Все свойства опциональны и сливаются с существующей конфигурацией:

  • charset: кодировка документа
  • viewport: настройки мета-тега viewport
  • meta: массив объектов мета-тегов
  • link: массив объектов ссылок (стили, иконки и т.д.)
  • style: массив инлайновых стилей
  • script: массив скриптов
  • noscript: массив noscript
  • title: заголовок страницы по умолчанию
  • titleTemplate: шаблон форматирования заголовков
  • bodyAttrs: атрибуты для <body>
  • htmlAttrs: атрибуты для <html>

Примеры

Глобальные мета-теги

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      meta: [
        { name: 'theme-color', content: '#ffffff' },
        { name: 'author', content: 'Your Name' },
      ],
    })
  },
})

Глобальные таблицы стилей

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
        },
      ],
    })
  },
})

Глобальные скрипты

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      script: [
        {
          src: 'https://cdn.example.com/analytics.js',
          async: true,
          defer: true,
        },
      ],
    })
  },
})

Атрибуты HTML и body

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      htmlAttrs: {
        lang: 'en',
        dir: 'ltr',
      },
      bodyAttrs: {
        class: 'custom-body-class',
      },
    })
  },
})