@unhead/vue 2.0.14 → 2.0.18

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 CHANGED
@@ -1,13 +1,183 @@
1
- # `@unhead/vue`
1
+ # @unhead/vue
2
2
 
3
- Visit the [documentation site](https://unhead.unjs.io/) for guides and API references.
3
+ > Full-stack `<head>` management for Vue applications
4
4
 
5
- ## Install
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 i @unhead/vue
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 License © 2022-PRESENT [Harlan Wilton](https://github.com/harlan-zw)
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/client.mjs CHANGED
@@ -1,12 +1,10 @@
1
1
  import { createHead as createHead$1, createDebouncedFn, renderDOMHead } from 'unhead/client';
2
2
  export { renderDOMHead } from 'unhead/client';
3
- import { v as vueInstall } from './shared/vue.BYLJNEcq.mjs';
4
- export { V as VueHeadMixin } from './shared/vue.nvpYXC6D.mjs';
5
- import 'unhead/plugins';
6
- import 'unhead/utils';
3
+ import { v as vueInstall } from './shared/vue.Kp0sxz0n.mjs';
4
+ export { V as VueHeadMixin } from './shared/vue.CgTRvX2j.mjs';
7
5
  import 'vue';
8
- import './shared/vue.N9zWjxoK.mjs';
9
6
 
7
+ // @__NO_SIDE_EFFECTS__
10
8
  function createHead(options = {}) {
11
9
  const head = createHead$1({
12
10
  domOptions: {
@@ -1,7 +1,8 @@
1
1
  import { defineComponent, ref, onBeforeUnmount, watchEffect } from 'vue';
2
- import { u as useHead } from './shared/vue.BYLJNEcq.mjs';
2
+ import { u as useHead } from './shared/vue.BROZw4iv.mjs';
3
3
  import 'unhead/plugins';
4
4
  import 'unhead/utils';
5
+ import './shared/vue.Kp0sxz0n.mjs';
5
6
  import './shared/vue.N9zWjxoK.mjs';
6
7
 
7
8
  function addVNodeToHeadObj(node, obj) {
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/dist/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
1
  import { createUnhead } from 'unhead';
2
2
  export { createUnhead } from 'unhead';
3
- export { h as headSymbol, i as injectHead, u as useHead, a as useHeadSafe, b as useSeoMeta, c as useServerHead, d as useServerHeadSafe, e as useServerSeoMeta } from './shared/vue.BYLJNEcq.mjs';
3
+ export { i as injectHead, u as useHead, a as useHeadSafe, b as useSeoMeta, c as useServerHead, d as useServerHeadSafe, e as useServerSeoMeta } from './shared/vue.BROZw4iv.mjs';
4
+ export { h as headSymbol } from './shared/vue.Kp0sxz0n.mjs';
4
5
  export { resolveUnrefHeadInput } from './utils.mjs';
5
- export { V as VueHeadMixin } from './shared/vue.nvpYXC6D.mjs';
6
- export { u as useScript } from './shared/vue.cHBs6zvy.mjs';
6
+ export { V as VueHeadMixin } from './shared/vue.CgTRvX2j.mjs';
7
+ export { u as useScript } from './shared/vue.HGGopy_V.mjs';
7
8
  import 'unhead/plugins';
8
9
  import 'unhead/utils';
9
10
  import 'vue';
package/dist/legacy.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import { createUnhead } from 'unhead';
2
2
  import { inject, ref, watchEffect, unref, watch, getCurrentInstance, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
3
3
  import { createHead as createHead$1 } from './client.mjs';
4
- import { h as headSymbol } from './shared/vue.BYLJNEcq.mjs';
4
+ import { h as headSymbol } from './shared/vue.Kp0sxz0n.mjs';
5
5
  import { V as VueResolver } from './shared/vue.N9zWjxoK.mjs';
6
6
  import { createHead as createHead$2 } from './server.mjs';
7
7
  import { walkResolver } from 'unhead/utils';
8
8
  import { defineHeadPlugin, DeprecationsPlugin, PromisesPlugin, TemplateParamsPlugin, AliasSortingPlugin, SafeInputPlugin, FlatMetaPlugin } from 'unhead/plugins';
9
9
  import 'unhead/client';
10
- import './shared/vue.nvpYXC6D.mjs';
10
+ import './shared/vue.CgTRvX2j.mjs';
11
11
  import 'unhead/server';
12
12
 
13
13
  const createHeadCore = createUnhead;
package/dist/scripts.mjs CHANGED
@@ -1,7 +1,8 @@
1
1
  export { createSpyProxy, resolveScriptKey } from 'unhead/scripts';
2
- export { u as useScript } from './shared/vue.cHBs6zvy.mjs';
2
+ export { u as useScript } from './shared/vue.HGGopy_V.mjs';
3
3
  import 'vue';
4
- import './shared/vue.BYLJNEcq.mjs';
4
+ import './shared/vue.BROZw4iv.mjs';
5
5
  import 'unhead/plugins';
6
6
  import 'unhead/utils';
7
+ import './shared/vue.Kp0sxz0n.mjs';
7
8
  import './shared/vue.N9zWjxoK.mjs';
package/dist/server.mjs CHANGED
@@ -1,12 +1,11 @@
1
1
  import { createHead as createHead$1 } from 'unhead/server';
2
2
  export { extractUnheadInputFromHtml, propsToString, renderSSRHead, transformHtmlTemplate } from 'unhead/server';
3
- import { v as vueInstall } from './shared/vue.BYLJNEcq.mjs';
3
+ import { v as vueInstall } from './shared/vue.Kp0sxz0n.mjs';
4
4
  import { V as VueResolver } from './shared/vue.N9zWjxoK.mjs';
5
- export { V as VueHeadMixin } from './shared/vue.nvpYXC6D.mjs';
6
- import 'unhead/plugins';
7
- import 'unhead/utils';
5
+ export { V as VueHeadMixin } from './shared/vue.CgTRvX2j.mjs';
8
6
  import 'vue';
9
7
 
8
+ // @__NO_SIDE_EFFECTS__
10
9
  function createHead(options = {}) {
11
10
  const head = createHead$1({
12
11
  ...options,
@@ -1,20 +1,10 @@
1
1
  import { SafeInputPlugin, FlatMetaPlugin } from 'unhead/plugins';
2
2
  import { walkResolver } from 'unhead/utils';
3
3
  import { hasInjectionContext, inject, ref, watchEffect, getCurrentInstance, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
4
+ import { h as headSymbol } from './vue.Kp0sxz0n.mjs';
4
5
  import { V as VueResolver } from './vue.N9zWjxoK.mjs';
5
6
 
6
- const headSymbol = "usehead";
7
- function vueInstall(head) {
8
- const plugin = {
9
- install(app) {
10
- app.config.globalProperties.$unhead = head;
11
- app.config.globalProperties.$head = head;
12
- app.provide(headSymbol, head);
13
- }
14
- };
15
- return plugin.install;
16
- }
17
-
7
+ // @__NO_SIDE_EFFECTS__
18
8
  function injectHead() {
19
9
  if (hasInjectionContext()) {
20
10
  const instance = inject(headSymbol);
@@ -25,10 +15,12 @@ function injectHead() {
25
15
  }
26
16
  throw new Error("useHead() was called without provide context, ensure you call it through the setup() function.");
27
17
  }
18
+ // @__NO_SIDE_EFFECTS__
28
19
  function useHead(input, options = {}) {
29
- const head = options.head || injectHead();
30
- return head.ssr ? head.push(input || {}, options) : clientUseHead(head, input, options);
20
+ const head = options.head || /* @__PURE__ */ injectHead();
21
+ return head.ssr ? head.push(input || {}, options) : /* @__PURE__ */ clientUseHead(head, input, options);
31
22
  }
23
+ // @__NO_SIDE_EFFECTS__
32
24
  function clientUseHead(head, input, options = {}) {
33
25
  const deactivated = ref(false);
34
26
  let entry;
@@ -54,30 +46,35 @@ function clientUseHead(head, input, options = {}) {
54
46
  }
55
47
  return entry;
56
48
  }
49
+ // @__NO_SIDE_EFFECTS__
57
50
  function useHeadSafe(input = {}, options = {}) {
58
- const head = options.head || injectHead();
51
+ const head = options.head || /* @__PURE__ */ injectHead();
59
52
  head.use(SafeInputPlugin);
60
53
  options._safe = true;
61
- return useHead(input, options);
54
+ return /* @__PURE__ */ useHead(input, options);
62
55
  }
56
+ // @__NO_SIDE_EFFECTS__
63
57
  function useSeoMeta(input = {}, options = {}) {
64
- const head = options.head || injectHead();
58
+ const head = options.head || /* @__PURE__ */ injectHead();
65
59
  head.use(FlatMetaPlugin);
66
60
  const { title, titleTemplate, ...meta } = input;
67
- return useHead({
61
+ return /* @__PURE__ */ useHead({
68
62
  title,
69
63
  titleTemplate,
70
64
  _flatMeta: meta
71
65
  }, options);
72
66
  }
67
+ // @__NO_SIDE_EFFECTS__
73
68
  function useServerHead(input, options = {}) {
74
- return useHead(input, { ...options, mode: "server" });
69
+ return /* @__PURE__ */ useHead(input, { ...options, mode: "server" });
75
70
  }
71
+ // @__NO_SIDE_EFFECTS__
76
72
  function useServerHeadSafe(input, options = {}) {
77
- return useHeadSafe(input, { ...options, mode: "server" });
73
+ return /* @__PURE__ */ useHeadSafe(input, { ...options, mode: "server" });
78
74
  }
75
+ // @__NO_SIDE_EFFECTS__
79
76
  function useServerSeoMeta(input, options = {}) {
80
- return useSeoMeta(input, { ...options, mode: "server" });
77
+ return /* @__PURE__ */ useSeoMeta(input, { ...options, mode: "server" });
81
78
  }
82
79
 
83
- export { useHeadSafe as a, useSeoMeta as b, useServerHead as c, useServerHeadSafe as d, useServerSeoMeta as e, headSymbol as h, injectHead as i, useHead as u, vueInstall as v };
80
+ export { useHeadSafe as a, useSeoMeta as b, useServerHead as c, useServerHeadSafe as d, useServerSeoMeta as e, injectHead as i, useHead as u };
@@ -1,17 +1,14 @@
1
1
  import { getCurrentInstance } from 'vue';
2
- import { u as useHead } from './vue.BYLJNEcq.mjs';
3
2
 
4
3
  const VueHeadMixin = {
5
4
  created() {
6
- let source = false;
7
5
  const instance = getCurrentInstance();
8
6
  if (!instance)
9
7
  return;
10
8
  const options = instance.type;
11
9
  if (!options || !("head" in options))
12
10
  return;
13
- source = typeof options.head === "function" ? () => options.head.call(instance.proxy) : options.head;
14
- source && useHead(source);
11
+ typeof options.head === "function" ? () => options.head.call(instance.proxy) : options.head;
15
12
  }
16
13
  };
17
14
 
@@ -1,6 +1,6 @@
1
1
  import { useScript as useScript$1 } from 'unhead/scripts';
2
2
  import { getCurrentInstance, onMounted, isRef, watch, onScopeDispose, ref } from 'vue';
3
- import { i as injectHead } from './vue.BYLJNEcq.mjs';
3
+ import { i as injectHead } from './vue.BROZw4iv.mjs';
4
4
 
5
5
  function registerVueScopeHandlers(script, scope) {
6
6
  if (!scope) {
@@ -0,0 +1,14 @@
1
+ const headSymbol = "usehead";
2
+ // @__NO_SIDE_EFFECTS__
3
+ function vueInstall(head) {
4
+ const plugin = {
5
+ install(app) {
6
+ app.config.globalProperties.$unhead = head;
7
+ app.config.globalProperties.$head = head;
8
+ app.provide(headSymbol, head);
9
+ }
10
+ };
11
+ return plugin.install;
12
+ }
13
+
14
+ export { headSymbol as h, vueInstall as v };
package/dist/utils.mjs CHANGED
@@ -3,6 +3,7 @@ export * from 'unhead/utils';
3
3
  import { V as VueResolver } from './shared/vue.N9zWjxoK.mjs';
4
4
  import 'vue';
5
5
 
6
+ // @__NO_SIDE_EFFECTS__
6
7
  function resolveUnrefHeadInput(input) {
7
8
  return walkResolver(input, VueResolver);
8
9
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@unhead/vue",
3
3
  "type": "module",
4
- "version": "2.0.14",
4
+ "version": "2.0.18",
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.14"
106
+ "unhead": "2.0.18"
107
107
  },
108
108
  "devDependencies": {
109
- "vue": "^3.5.18"
109
+ "vue": "^3.5.21"
110
110
  },
111
111
  "scripts": {
112
112
  "build": "unbuild",