Мета-теги и head

Исходный код
Nuxt Kit предоставляет утилиты для задания глобального `<head>` из модулей.

Модули могут задавать глобальные мета-теги, ссылки, скрипты и другие элементы <head> через setGlobalHead, не трогая nuxt.config вручную. Для страниц и компонентов используйте useHead и useSeoMeta.

setGlobalHead

Задаёт глобальную конфигурацию <head> для приложения: мета-теги, ссылки, скрипты и прочее наследуются всеми страницами, если не переопределены ниже.

Новые поля сливаются с уже заданными рекурсивно; значения из setGlobalHead перекрывают совпадающие ключи.

Удобно модулям, которым нужно один раз подключить общие мета-теги, стили или скрипты.

Тип

// @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 — массив встроенных <style>
  • script — массив тегов <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: 'Имя автора' },
      ],
    })
  },
})

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

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

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

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