Head

Source
Nuxt Kit provides utilities to help you manage head configuration in modules.

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.

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

Type

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