@nuxt/docs-nightly 4.2.0-29355133.7db30a63 → 4.3.0-29356103.2f7957ac
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/3.api/5.kit/9.head.md +132 -0
- package/package.json +1 -1
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Head
|
|
3
|
+
description: Nuxt Kit provides utilities to help you manage head configuration in modules.
|
|
4
|
+
links:
|
|
5
|
+
- label: Source
|
|
6
|
+
icon: i-simple-icons-github
|
|
7
|
+
to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/head.ts
|
|
8
|
+
size: xs
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## `setGlobalHead`
|
|
12
|
+
|
|
13
|
+
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.
|
|
14
|
+
|
|
15
|
+
The provided head configuration will be merged with any existing head configuration using deep merging, with your provided values taking precedence.
|
|
16
|
+
|
|
17
|
+
::tip
|
|
18
|
+
This is particularly useful for modules that need to inject global meta tags, stylesheets, or scripts into the application head.
|
|
19
|
+
::
|
|
20
|
+
|
|
21
|
+
### Type
|
|
22
|
+
|
|
23
|
+
```ts twoslash
|
|
24
|
+
// @errors: 2391
|
|
25
|
+
// ---cut---
|
|
26
|
+
import type { SerializableHead } from '@unhead/vue/types'
|
|
27
|
+
|
|
28
|
+
interface AppHeadMetaObject extends SerializableHead {
|
|
29
|
+
charset?: string
|
|
30
|
+
viewport?: string
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function setGlobalHead (head: AppHeadMetaObject): void
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Parameters
|
|
37
|
+
|
|
38
|
+
#### `head`
|
|
39
|
+
|
|
40
|
+
**Type**: `AppHeadMetaObject`
|
|
41
|
+
|
|
42
|
+
An object containing head configuration. All properties are optional and will be merged with existing configuration:
|
|
43
|
+
|
|
44
|
+
- `charset`: Character encoding for the document
|
|
45
|
+
- `viewport`: Viewport meta tag configuration
|
|
46
|
+
- `meta`: Array of meta tag objects
|
|
47
|
+
- `link`: Array of link tag objects (stylesheets, icons, etc.)
|
|
48
|
+
- `style`: Array of inline style tag objects
|
|
49
|
+
- `script`: Array of script tag objects
|
|
50
|
+
- `noscript`: Array of noscript tag objects
|
|
51
|
+
- `title`: Default page title
|
|
52
|
+
- `titleTemplate`: Template for formatting page titles
|
|
53
|
+
- `bodyAttrs`: Attributes to add to the `<body>` tag
|
|
54
|
+
- `htmlAttrs`: Attributes to add to the `<html>` tag
|
|
55
|
+
|
|
56
|
+
### Examples
|
|
57
|
+
|
|
58
|
+
#### Adding Global Meta Tags
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
|
|
62
|
+
|
|
63
|
+
export default defineNuxtModule({
|
|
64
|
+
setup () {
|
|
65
|
+
setGlobalHead({
|
|
66
|
+
meta: [
|
|
67
|
+
{ name: 'theme-color', content: '#ffffff' },
|
|
68
|
+
{ name: 'author', content: 'Your Name' },
|
|
69
|
+
],
|
|
70
|
+
})
|
|
71
|
+
},
|
|
72
|
+
})
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### Injecting Global Stylesheets
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
|
|
79
|
+
|
|
80
|
+
export default defineNuxtModule({
|
|
81
|
+
setup () {
|
|
82
|
+
setGlobalHead({
|
|
83
|
+
link: [
|
|
84
|
+
{
|
|
85
|
+
rel: 'stylesheet',
|
|
86
|
+
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
})
|
|
90
|
+
},
|
|
91
|
+
})
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
#### Adding Global Scripts
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
|
|
98
|
+
|
|
99
|
+
export default defineNuxtModule({
|
|
100
|
+
setup () {
|
|
101
|
+
setGlobalHead({
|
|
102
|
+
script: [
|
|
103
|
+
{
|
|
104
|
+
src: 'https://cdn.example.com/analytics.js',
|
|
105
|
+
async: true,
|
|
106
|
+
defer: true,
|
|
107
|
+
},
|
|
108
|
+
],
|
|
109
|
+
})
|
|
110
|
+
},
|
|
111
|
+
})
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
#### Setting HTML Attributes
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'
|
|
118
|
+
|
|
119
|
+
export default defineNuxtModule({
|
|
120
|
+
setup () {
|
|
121
|
+
setGlobalHead({
|
|
122
|
+
htmlAttrs: {
|
|
123
|
+
lang: 'en',
|
|
124
|
+
dir: 'ltr',
|
|
125
|
+
},
|
|
126
|
+
bodyAttrs: {
|
|
127
|
+
class: 'custom-body-class',
|
|
128
|
+
},
|
|
129
|
+
})
|
|
130
|
+
},
|
|
131
|
+
})
|
|
132
|
+
```
|