@unhead/vue 2.0.14 → 2.0.17
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/README.md +175 -5
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,13 +1,183 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @unhead/vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Full-stack `<head>` management for Vue applications
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[![npm version][npm-version-src]][npm-version-href]
|
|
6
|
+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
7
|
+
[![License][license-src]][license-href]
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- 🖖 Vue-optimized head management
|
|
12
|
+
- 🔄 Reactive titles, meta tags, and other head elements
|
|
13
|
+
- 🔍 SEO-friendly head control
|
|
14
|
+
- 🖥️ Server-side rendering support
|
|
15
|
+
- 📦 Lightweight with zero dependencies (except for Vue & unhead)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
6
18
|
|
|
7
19
|
```bash
|
|
8
|
-
npm
|
|
20
|
+
# npm
|
|
21
|
+
npm install @unhead/vue
|
|
22
|
+
|
|
23
|
+
# yarn
|
|
24
|
+
yarn add @unhead/vue
|
|
25
|
+
|
|
26
|
+
# pnpm
|
|
27
|
+
pnpm add @unhead/vue
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Setup
|
|
33
|
+
|
|
34
|
+
#### Client-side (SPA)
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { createHead } from '@unhead/vue/client'
|
|
38
|
+
// main.ts
|
|
39
|
+
import { createApp } from 'vue'
|
|
40
|
+
import App from './App.vue'
|
|
41
|
+
|
|
42
|
+
const app = createApp(App)
|
|
43
|
+
const head = createHead()
|
|
44
|
+
app.use(head)
|
|
45
|
+
|
|
46
|
+
app.mount('#app')
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Server-side (SSR)
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import { createHead } from '@unhead/vue/server'
|
|
53
|
+
// entry-server.ts
|
|
54
|
+
import { renderToString } from 'vue/server-renderer'
|
|
55
|
+
import { createApp } from './main'
|
|
56
|
+
|
|
57
|
+
export async function render(url: string) {
|
|
58
|
+
const { app } = createApp()
|
|
59
|
+
const head = createHead()
|
|
60
|
+
app.use(head)
|
|
61
|
+
|
|
62
|
+
const html = await renderToString(app)
|
|
63
|
+
return { html, head }
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import { createHead } from '@unhead/vue/client'
|
|
69
|
+
// entry-client.ts (for hydration)
|
|
70
|
+
import { createApp } from './main'
|
|
71
|
+
|
|
72
|
+
const { app } = createApp()
|
|
73
|
+
const head = createHead()
|
|
74
|
+
app.use(head)
|
|
75
|
+
|
|
76
|
+
app.mount('#app')
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Basic Usage
|
|
80
|
+
|
|
81
|
+
```vue
|
|
82
|
+
<!-- Home.vue -->
|
|
83
|
+
<script setup lang="ts">
|
|
84
|
+
import { useHead } from '@unhead/vue'
|
|
85
|
+
|
|
86
|
+
useHead({
|
|
87
|
+
title: 'Home Page',
|
|
88
|
+
meta: [
|
|
89
|
+
{
|
|
90
|
+
name: 'description',
|
|
91
|
+
content: 'Welcome to our website'
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
})
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<template>
|
|
98
|
+
<h1>Home</h1>
|
|
99
|
+
</template>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Setting Meta Tags
|
|
103
|
+
|
|
104
|
+
```vue
|
|
105
|
+
<!-- About.vue -->
|
|
106
|
+
<script setup lang="ts">
|
|
107
|
+
import { useSeoMeta } from '@unhead/vue'
|
|
108
|
+
|
|
109
|
+
useSeoMeta({
|
|
110
|
+
title: 'About Us',
|
|
111
|
+
description: 'Learn more about our company',
|
|
112
|
+
ogTitle: 'About Our Company',
|
|
113
|
+
ogDescription: 'Our fantastic about page',
|
|
114
|
+
ogImage: 'https://example.com/image.jpg',
|
|
115
|
+
})
|
|
116
|
+
</script>
|
|
117
|
+
|
|
118
|
+
<template>
|
|
119
|
+
<h1>About Us</h1>
|
|
120
|
+
</template>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Reactive Head Elements
|
|
124
|
+
|
|
125
|
+
```vue
|
|
126
|
+
<!-- Profile.vue -->
|
|
127
|
+
<script setup lang="ts">
|
|
128
|
+
import { useHead } from '@unhead/vue'
|
|
129
|
+
import { ref } from 'vue'
|
|
130
|
+
|
|
131
|
+
const userName = ref('User')
|
|
132
|
+
|
|
133
|
+
// Vue automatically tracks reactive changes
|
|
134
|
+
useHead({
|
|
135
|
+
title: () => `${userName.value} - Profile`, // Reactive title
|
|
136
|
+
meta: [
|
|
137
|
+
{
|
|
138
|
+
name: 'description',
|
|
139
|
+
content: () => `${userName.value}'s profile page`, // Reactive description
|
|
140
|
+
},
|
|
141
|
+
],
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
function updateName() {
|
|
145
|
+
userName.value = 'New Name'
|
|
146
|
+
// Title and meta automatically update!
|
|
147
|
+
}
|
|
148
|
+
</script>
|
|
149
|
+
|
|
150
|
+
<template>
|
|
151
|
+
<h1>{{ userName }}'s Profile</h1>
|
|
152
|
+
<button @click="updateName">
|
|
153
|
+
Update Name
|
|
154
|
+
</button>
|
|
155
|
+
</template>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Development
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
# Install dependencies
|
|
162
|
+
npm install
|
|
163
|
+
|
|
164
|
+
# Generate build files
|
|
165
|
+
npm run build
|
|
166
|
+
|
|
167
|
+
# Run tests
|
|
168
|
+
npm run test
|
|
9
169
|
```
|
|
10
170
|
|
|
11
171
|
## License
|
|
12
172
|
|
|
13
|
-
MIT
|
|
173
|
+
[MIT](./LICENSE)
|
|
174
|
+
|
|
175
|
+
<!-- Badges -->
|
|
176
|
+
[npm-version-src]: https://img.shields.io/npm/v/@unhead/vue/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
177
|
+
[npm-version-href]: https://npmjs.com/package/@unhead/vue
|
|
178
|
+
|
|
179
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/vue.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
180
|
+
[npm-downloads-href]: https://npmjs.com/package/@unhead/vue
|
|
181
|
+
|
|
182
|
+
[license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
|
|
183
|
+
[license-href]: https://github.com/unjs/unhead/blob/main/LICENSE
|
package/dist/index.d.mts
CHANGED
|
@@ -6,11 +6,11 @@ import { V as VueHeadClient, U as UseHeadInput, a as UseHeadOptions, b as UseSeo
|
|
|
6
6
|
export { B as BodyAttr, D as DeepResolvableProperties, H as HtmlAttr, M as MaybeFalsy, l as ReactiveHead, n as ResolvableArray, d as ResolvableBase, k as ResolvableBodyAttributes, j as ResolvableHtmlAttributes, e as ResolvableLink, f as ResolvableMeta, i as ResolvableNoscript, o as ResolvableProperties, h as ResolvableScript, g as ResolvableStyle, R as ResolvableTitle, c as ResolvableTitleTemplate, p as ResolvableUnion, m as ResolvableValue } from './shared/vue.DoxLTFJk.mjs';
|
|
7
7
|
import { U as UseHeadSafeInput } from './shared/vue.DMlT7xkj.mjs';
|
|
8
8
|
export { H as HeadSafe, S as SafeBodyAttr, a as SafeHtmlAttr, c as SafeLink, b as SafeMeta, e as SafeNoscript, d as SafeScript, f as SafeStyle } from './shared/vue.DMlT7xkj.mjs';
|
|
9
|
+
export { AsVoidFunctions, EventHandlerOptions, RecordingEntry, ScriptInstance, UseFunctionType, UseScriptResolvedInput, UseScriptStatus, WarmupStrategy, createSpyProxy, resolveScriptKey } from 'unhead/scripts';
|
|
10
|
+
export { UseScriptContext, UseScriptInput, UseScriptOptions, UseScriptReturn, VueScriptInstance, useScript } from './scripts.mjs';
|
|
9
11
|
export { Base, BodyAttributes, HtmlAttributes, Link, Meta, Noscript, Script, Style } from './types.mjs';
|
|
10
12
|
export { resolveUnrefHeadInput } from './utils.mjs';
|
|
11
13
|
export { V as VueHeadMixin } from './shared/vue.DnywREVF.mjs';
|
|
12
|
-
export { UseScriptContext, UseScriptInput, UseScriptOptions, UseScriptReturn, VueScriptInstance, useScript } from './scripts.mjs';
|
|
13
|
-
export { AsVoidFunctions, EventHandlerOptions, RecordingEntry, ScriptInstance, UseFunctionType, UseScriptResolvedInput, UseScriptStatus, WarmupStrategy, createSpyProxy, resolveScriptKey } from 'unhead/scripts';
|
|
14
14
|
import 'vue';
|
|
15
15
|
import 'unhead/utils';
|
|
16
16
|
|
package/dist/index.d.ts
CHANGED
|
@@ -6,11 +6,11 @@ import { V as VueHeadClient, U as UseHeadInput, a as UseHeadOptions, b as UseSeo
|
|
|
6
6
|
export { B as BodyAttr, D as DeepResolvableProperties, H as HtmlAttr, M as MaybeFalsy, l as ReactiveHead, n as ResolvableArray, d as ResolvableBase, k as ResolvableBodyAttributes, j as ResolvableHtmlAttributes, e as ResolvableLink, f as ResolvableMeta, i as ResolvableNoscript, o as ResolvableProperties, h as ResolvableScript, g as ResolvableStyle, R as ResolvableTitle, c as ResolvableTitleTemplate, p as ResolvableUnion, m as ResolvableValue } from './shared/vue.DoxLTFJk.js';
|
|
7
7
|
import { U as UseHeadSafeInput } from './shared/vue.CzjZUNjB.js';
|
|
8
8
|
export { H as HeadSafe, S as SafeBodyAttr, a as SafeHtmlAttr, c as SafeLink, b as SafeMeta, e as SafeNoscript, d as SafeScript, f as SafeStyle } from './shared/vue.CzjZUNjB.js';
|
|
9
|
+
export { AsVoidFunctions, EventHandlerOptions, RecordingEntry, ScriptInstance, UseFunctionType, UseScriptResolvedInput, UseScriptStatus, WarmupStrategy, createSpyProxy, resolveScriptKey } from 'unhead/scripts';
|
|
10
|
+
export { UseScriptContext, UseScriptInput, UseScriptOptions, UseScriptReturn, VueScriptInstance, useScript } from './scripts.js';
|
|
9
11
|
export { Base, BodyAttributes, HtmlAttributes, Link, Meta, Noscript, Script, Style } from './types.js';
|
|
10
12
|
export { resolveUnrefHeadInput } from './utils.js';
|
|
11
13
|
export { V as VueHeadMixin } from './shared/vue.DnywREVF.js';
|
|
12
|
-
export { UseScriptContext, UseScriptInput, UseScriptOptions, UseScriptReturn, VueScriptInstance, useScript } from './scripts.js';
|
|
13
|
-
export { AsVoidFunctions, EventHandlerOptions, RecordingEntry, ScriptInstance, UseFunctionType, UseScriptResolvedInput, UseScriptStatus, WarmupStrategy, createSpyProxy, resolveScriptKey } from 'unhead/scripts';
|
|
14
14
|
import 'vue';
|
|
15
15
|
import 'unhead/utils';
|
|
16
16
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unhead/vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.17",
|
|
5
5
|
"description": "Full-stack <head> manager built for Vue.",
|
|
6
6
|
"author": "Harlan Wilton <harlan@harlanzw.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -103,10 +103,10 @@
|
|
|
103
103
|
},
|
|
104
104
|
"dependencies": {
|
|
105
105
|
"hookable": "^5.5.3",
|
|
106
|
-
"unhead": "2.0.
|
|
106
|
+
"unhead": "2.0.17"
|
|
107
107
|
},
|
|
108
108
|
"devDependencies": {
|
|
109
|
-
"vue": "^3.5.
|
|
109
|
+
"vue": "^3.5.21"
|
|
110
110
|
},
|
|
111
111
|
"scripts": {
|
|
112
112
|
"build": "unbuild",
|