setGlobalHeadSets 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.
twoslash
// @errors: 2391
// ---cut---
interface AppHeadMetaObject extends SerializableHead {
charset?: string
viewport?: string
}
function setGlobalHead (head: AppHeadMetaObject): voidheadType: AppHeadMetaObject
An object containing head configuration. All properties are optional and will be merged with existing configuration:
charset: Character encoding for the documentviewport: Viewport meta tag configurationmeta: Array of meta tag objectslink: Array of link tag objects (stylesheets, icons, etc.)style: Array of inline style tag objectsscript: Array of script tag objectsnoscript: Array of noscript tag objectstitle: Default page titletitleTemplate: Template for formatting page titlesbodyAttrs: Attributes to add to the <body> taghtmlAttrs: Attributes to add to the <html> tag
export default defineNuxtModule({
setup () {
setGlobalHead({
meta: [
{ name: 'theme-color', content: '#ffffff' },
{ name: 'author', content: 'Your Name' },
],
})
},
})
export default defineNuxtModule({
setup () {
setGlobalHead({
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
},
],
})
},
})
export default defineNuxtModule({
setup () {
setGlobalHead({
script: [
{
src: 'https://cdn.example.com/analytics.js',
async: true,
defer: true,
},
],
})
},
})
export default defineNuxtModule({
setup () {
setGlobalHead({
htmlAttrs: {
lang: 'en',
dir: 'ltr',
},
bodyAttrs: {
class: 'custom-body-class',
},
})
},
})