🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@vueuse/head

Package Overview
Dependencies
Maintainers
4
Versions
97
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vueuse/head - npm Package Compare versions

Comparing version

1.3.1
to
2.0.0

dist/index.d.cts
dist/index.d.mts

93

dist/index.d.ts

@@ -1,91 +0,16 @@

import { HeadTag, MergeHead, MaybeComputedRef, ReactiveHead, VueHeadClient } from '@unhead/vue';
import { MergeHead, ReactiveHead } from '@unhead/vue';
export { ActiveHeadEntry, HeadEntryOptions, HeadTag, MaybeComputedRef, MergeHead, ReactiveHead, Unhead, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadMixin, createHeadCore, injectHead, unheadVueComposablesImports, useHead, useHeadSafe, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta } from '@unhead/vue';
import * as _unhead_schema from '@unhead/schema';
import { HeadEntry, HeadPlugin, HeadEntryOptions, ActiveHeadEntry, Unhead, Head as Head$1, CreateHeadOptions } from '@unhead/schema';
import * as vue from 'vue';
import { App, Plugin } from 'vue';
import { Head, CreateHeadOptions } from '@unhead/schema';
import { VueHeadClientPollyFill as VueHeadClientPollyFill$1 } from '@unhead/vue/polyfill';
import { Plugin } from 'vue';
export { Head } from '@unhead/vue/components';
type HookBeforeDomUpdate = (() => Promise<void | boolean> | void | boolean);
type HookTagsResolved = ((tags: HeadTag[]) => Promise<void> | void);
type HookEntriesResolved = ((entries: HeadEntry<any>[]) => Promise<void> | void);
interface LegacyHeadOptions {
/**
* @deprecated
*/
resolved?: boolean;
/**
* @deprecated
*/
raw?: boolean;
}
interface HeadClient<T extends MergeHead = {}> {
install: (app: App) => void;
resolveTags: () => Promise<HeadTag[]>;
use: (plugin: HeadPlugin) => void;
headEntries: () => HeadEntry<MaybeComputedRef<ReactiveHead<T>>>[];
push: (entry: MaybeComputedRef<ReactiveHead<T>>, options?: HeadEntryOptions) => ActiveHeadEntry<MaybeComputedRef<ReactiveHead<T>>>;
/**
* @deprecated use `push`
*/
addEntry: (entry: MaybeComputedRef<ReactiveHead<T>>, options?: HeadEntryOptions & LegacyHeadOptions) => ActiveHeadEntry<MaybeComputedRef<ReactiveHead<T>>>;
/**
* @deprecated use `push`
*/
addReactiveEntry: (objs: MaybeComputedRef<ReactiveHead<T>>, options?: HeadEntryOptions & LegacyHeadOptions) => () => void;
/**
* @deprecated use `@unhead/dom`
*/
updateDOM: (document?: Document, force?: boolean) => void;
internalHooks: Unhead['hooks'];
/**
* @deprecated
*/
hooks:
/**
* Array of user provided functions to hook into before the DOM is updated.
*
* When returning false from this function, it will block DOM updates, this can be useful when stopping dom updates
* between page transitions.
*
* You are able to modify the payload of hook using this.
*/
Record<'before:dom', HookBeforeDomUpdate[]> & Record<'resolved:entries', HookEntriesResolved[]> &
/**
* Array of user provided functions to hook into after the tags have been resolved (deduped and sorted).
*/
Record<'resolved:tags', HookTagsResolved[]>;
/**
* Backwards compatibility function to fetch the headTags.
*
* This function forces reactivity resolving and is not performant.
*
* @deprecated Use `unhead.resolveTags()`.
*/
headTags: () => Promise<HeadTag[]>;
/**
* Backwards compatibility function to add a head obj.
*
* Note: This will not support reactivity. Use `addReactiveEntry` instead.
*
* @deprecated Use addEntry
*/
addHeadObjs: (entry: MaybeComputedRef<ReactiveHead<T>>, options?: HeadEntryOptions) => ActiveHeadEntry<MaybeComputedRef<ReactiveHead<T>>>;
/**
* @deprecated Does not do anything
*/
removeHeadObjs: (entry: MaybeComputedRef<ReactiveHead<T>>) => void;
/**
* Access the underlying unhead instance.
*/
unhead: VueHeadClient<T>;
}
declare function createHead<T extends MergeHead = {}>(initHeadObject?: Head$1<T>, options?: CreateHeadOptions): HeadClient<T>;
declare function createHead<T extends MergeHead = {}>(initHeadObject?: Head<T>, options?: CreateHeadOptions): VueHeadClientPollyFill$1<T>;
declare const HeadVuePlugin: Plugin;
declare const renderHeadToString: <T extends MergeHead = {}>(head: HeadClient<T>) => Promise<_unhead_schema.SSRHeadPayload>;
type HeadObjectPlain = Head$1;
declare const renderHeadToString: <T extends MergeHead = {}>(head: VueHeadClientPollyFill<T>) => Promise<_unhead_schema.SSRHeadPayload>;
type HeadObjectPlain = Head;
type HeadObject = ReactiveHead;
declare const Head: vue.DefineComponent<{}, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
export { Head, HeadClient, HeadObject, HeadObjectPlain, HeadVuePlugin, HookBeforeDomUpdate, HookEntriesResolved, HookTagsResolved, LegacyHeadOptions, createHead, renderHeadToString };
export { type HeadObject, type HeadObjectPlain, HeadVuePlugin, createHead, renderHeadToString };

61

package.json
{
"name": "@vueuse/head",
"version": "1.3.1",
"packageManager": "pnpm@7.25.0",
"version": "2.0.0",
"packageManager": "pnpm@8.7.5",
"description": "Document head manager for Vue 3. SSR ready.",

@@ -35,2 +35,9 @@ "author": {

"types": "dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
}
},
"files": [

@@ -53,31 +60,31 @@ "dist"

"dependencies": {
"@unhead/dom": "^1.3.1",
"@unhead/schema": "^1.3.1",
"@unhead/ssr": "^1.3.1",
"@unhead/vue": "^1.3.1"
"@unhead/dom": "^1.7.0",
"@unhead/schema": "^1.7.0",
"@unhead/ssr": "^1.7.0",
"@unhead/vue": "^1.7.0"
},
"devDependencies": {
"@antfu/eslint-config": "^0.36.0",
"@nuxt/kit": "3.2.3",
"@nuxt/test-utils": "3.2.3",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/compiler-sfc": "^3.2.47",
"@vue/server-renderer": "^3.2.47",
"@antfu/eslint-config": "^0.41.3",
"@nuxt/kit": "3.7.2",
"@nuxt/test-utils": "3.7.2",
"@vitejs/plugin-vue": "^4.3.4",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/compiler-sfc": "^3.3.4",
"@vue/server-renderer": "^3.3.4",
"cheerio": "1.0.0-rc.12",
"eslint": "^8.36.0",
"execa": "^7.1.0",
"get-port-please": "^3.0.1",
"jsdom": "^21.1.1",
"eslint": "^8.49.0",
"execa": "^8.0.1",
"get-port-please": "^3.1.1",
"jsdom": "^22.1.0",
"kanpai": "^0.11.0",
"mlly": "^1.2.0",
"nuxt": "^3.2.3",
"pathe": "^1.1.0",
"playwright": "^1.31.2",
"typescript": "^4.9.5",
"unbuild": "^1.1.2",
"vite": "^4.1.4",
"vitest": "^0.29.2",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
"mlly": "^1.4.2",
"nuxt": "^3.7.2",
"pathe": "^1.1.1",
"playwright": "^1.37.1",
"typescript": "^5.2.2",
"unbuild": "^2.0.0",
"vite": "^4.4.9",
"vitest": "^0.34.4",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},

@@ -84,0 +91,0 @@ "resolutions": {

94

README.md

@@ -1,2 +0,2 @@

<h1 align='center'>@vueuse/head</h1>
<h1 align='center'>@vueuse/head - 🌇 Sunset</h1>

@@ -32,92 +32,24 @@ <p align="center">

The `@vueuse/head` package is a simple compatible wrapper around [Unhead](https://unhead.harlanzw.com/), they share an almost identical API.
In the coming months, the `@vueuse/head` package will be deprecated.
If you're setting up this package on a new project, you should
use the `@unhead/vue` package directly.
Further documentation, guides and announcements will be out soon,
for now you can follow the [installation guide](https://unhead.harlanzw.com/integrations/vue/setup).
The `@vueuse/head` package has been sunset in favour of Unhead. This means no new features will be added to this package and
installation of this package directly will be discouraged.
## Features
[Unhead](https://unhead.unjs.io) is a any-framework document head manager with a focus on delightful DX and performance.
It's used in the Nuxt core and is part of the UnJS ecosystem.
- 💎 Fully typed augmentable Schema
- 🧑‍🤝‍🧑 Side-effect based DOM patching, plays nicely your existing other tags and attributes
- 🍣 Intuitive deduping, sorting, title templates, class merging and more
- 🪝 Extensible hook / plugin based API
This package and Unhead share an almost identical API and migrating in most cases will just involve updating the package names.
## Installation
The `@vueuse/head` package will continue to receive bug fixes and security updates for the foreseeable future.
```bash
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/head
```
[Installation guide](https://unhead.unjs.io/setup/vue/installation)
> Requires vue >= v3 or >=2.7
## Docs
## Usage
[Unhead documentation](https://unhead.unjs.io/setup/vue/installation)
### Vue 3
## Migrating to Unhead from @vueuse/head
Register the Vue plugin:
Replace all imports of `@vueuse/head` with `@unhead/vue`.
```ts
import { createApp } from "vue"
import { createHead } from "@vueuse/head"
If you're using the `<Head>` component you will need to import it from `@unhead/vue/components`.
const app = createApp()
const head = createHead()
app.use(head)
app.mount("#app")
```
### Vue 2
Register the Vue plugin:
```ts
import Vue from 'vue'
import { createHead, HeadVuePlugin } from "@vueuse/head"
const head = createHead()
// needed for Vue 2
Vue.use(HeadVuePlugin, head)
Vue.use(head)
new Vue({
render: h => h(App),
}).$mount('#app')
```
### SSR Rendering
```ts
import { renderToString } from "@vue/server-renderer"
import { renderHeadToString } from "@vueuse/head"
const appHTML = await renderToString(yourVueApp)
// `head` is created from `createHead()`
const { headTags, htmlAttrs, bodyAttrs, bodyTags } = await renderHeadToString(head)
const finalHTML = `
<html${htmlAttrs}>
<head>
${headTags}
</head>
<body${bodyAttrs}>
<div id="app">${appHTML}</div>
${bodyTags}
</body>
</html>`
```
## Further Documentation
Refer to the [unhead documentation](https://unhead.harlanzw.com/) for full API reference and more.
## Sponsors

@@ -124,0 +56,0 @@ 

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet