gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
133 lines
3.0 KiB
Markdown
133 lines
3.0 KiB
Markdown
---
|
|
title: Head
|
|
description: Nuxt Kit provides utilities to help you manage head configuration in modules.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/head.ts
|
|
size: xs
|
|
---
|
|
|
|
## `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
|
|
|
|
```ts twoslash
|
|
// @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
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
|
|
|
|
export default defineNuxtModule({
|
|
setup () {
|
|
setGlobalHead({
|
|
htmlAttrs: {
|
|
lang: 'en',
|
|
dir: 'ltr',
|
|
},
|
|
bodyAttrs: {
|
|
class: 'custom-body-class',
|
|
},
|
|
})
|
|
},
|
|
})
|
|
```
|