Head - Nuxt — ContextQMD

`setGlobalHead`

Sets global head configuration for your Nuxt application. This utility allows modules to programmatically configure meta tags, links, scripts, and other head elements that will be applied across all pages.

The provided head configuration will be merged with any existing head configuration using deep merging, with your provided values taking precedence.

::tip This is particularly useful for modules that need to inject global meta tags, stylesheets, or scripts into the application head. ::

Type

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

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

function setGlobalHead (head: AppHeadMetaObject): void

Parameters

`head`

Type: AppHeadMetaObject

An object containing head configuration. All properties are optional and will be merged with existing configuration:

charset: Character encoding for the document
viewport: Viewport meta tag configuration
meta: Array of meta tag objects
link: Array of link tag objects (stylesheets, icons, etc.)
style: Array of inline style tag objects
script: Array of script tag objects
noscript: Array of noscript tag objects
title: Default page title
titleTemplate: Template for formatting page titles
bodyAttrs: Attributes to add to the <body> tag
htmlAttrs: Attributes to add to the <html> tag

Examples

Adding Global Meta Tags

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

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

Injecting Global Stylesheets

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',
        },
      ],
    })
  },
})

Adding Global Scripts

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

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

Setting HTML Attributes

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

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