# @zhead/vue

> Use zhead with types for Vue ref's and computed.

Latest version **0.9.9** (published 2022-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zhead/vue
pnpm add @zhead/vue
yarn add @zhead/vue
bun add @zhead/vue
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.9.9 |
| Published | 2022-10-20 |
| First published | 2022-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 147 |
| Author | Harlan Wilton |
| Maintainers | harlan_zw |

## Links

- npm: https://www.npmjs.com/package/@zhead/vue
- Repository: https://github.com/harlan-zw/zhead
- Homepage: https://github.com/harlan-zw/zhead#readme
- Issues: https://github.com/harlan-zw/zhead/issues
- Funding: https://github.com/sponsors/harlan-zw
- npm.io page: https://npm.io/package/@zhead/vue

## Dependencies (4)

- [zhead](https://npm.io/package/zhead.md) 0.9.9
- [@zhead/schema](https://npm.io/package/@zhead/schema.md) 0.9.9
- [@vueuse/shared](https://npm.io/package/@vueuse/shared.md) ^9.2.0
- [@zhead/schema-vue](https://npm.io/package/@zhead/schema-vue.md) 0.9.9

## Recent versions

- 0.9.9 (latest) — 2022-10-20
- 0.9.8 — 2022-10-18
- 0.9.7 — 2022-10-14
- 0.9.6 — 2022-10-13
- 0.9.5 — 2022-10-12
- 0.9.4 — 2022-10-12
- 0.9.3 — 2022-10-12
- 0.9.2 — 2022-10-12
- 0.9.0 — 2022-10-12
- 0.9.1 — 2022-10-12
- 0.8.5 — 2022-10-05
- 0.8.4 — 2022-10-04
- 0.8.3 — 2022-10-04
- 0.8.2 — 2022-10-04
- 0.8.1 — 2022-10-03
- … 21 more at https://npm.io/package/@zhead/vue/versions

## README

# `@zhead/vue`

A wrapper around zhead for Vue, providing deep reactivity with types for head schema and meta tags packing.

## Installation

```bash
npm install --save-dev @zhead/vue

# Using yarn
yarn add --dev @zhead/vue
```

## API

### defineHead

```ts
import { defineHead } from '@zhead/vue'

const title = ref('My Awesome Title')

const head = defineHead({
  title,
  meta: computed(() => {
      return [
        { name: 'description', content: 'My awesome description' },
        { name: 'keywords', content: 'awesome, vue, zhead' },
      ]
  })
})

// {
//   title: 'My Awesome Title',
//   meta: [
//     { name: 'description', content: 'My awesome description' },
//     { name: 'keywords', content: 'awesome, vue, zhead' },
//   ]
// }
```

### packMeta

```ts
import { packMeta } from '@zhead/vue'

const description = ref('My Awesome Title')

packMeta([
  { name: 'description', content: description },
])


// Ref<{
//   name: 'description',
//   content: ref('My Awesome Title')
// }>
```

### unpackMeta

```ts
import { packMeta } from '@zhead/vue'

const description = ref('My Awesome Title')

unpackmeta({
  description,
})

// Ref<[
//    { name: 'description', content: ref('My Awesome Title') },
// ]>
```

---
_Source: https://npm.io/package/@zhead/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._