# vue-head-mixin

> A Vue mixin to manage document title and meta tags. Works on both client and server side.

Latest version **0.1.1** (published 2017-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-head-mixin
pnpm add vue-head-mixin
yarn add vue-head-mixin
bun add vue-head-mixin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-10-13 |
| First published | 2017-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jiang Fengming |
| Maintainers | fenivana |
| Keywords | vue, head, meta, mixin |

## Links

- npm: https://www.npmjs.com/package/vue-head-mixin
- Repository: https://github.com/fenivana/vue-head-mixin
- Homepage: https://github.com/fenivana/vue-head-mixin#readme
- Issues: https://github.com/fenivana/vue-head-mixin/issues
- npm.io page: https://npm.io/package/vue-head-mixin

## Recent versions

- 0.1.1 (latest) — 2017-10-13
- 0.1.0 — 2017-10-13
- 0.1.0-dev — 2017-10-12

## README

# vue-head-mixin
A Vue mixin to manage document title and meta tags. Works on both client and server side.


## Usage

```js
import vueHeadMixin from 'vue-head-mixin'

const headMixin = vueHeadMixin({
  titleTemplate: '%s - Your Company Name'
})

export default {
  mixins: [headMixin],

  props: ['id'],

  asyncData({ store, route }) {
    return store.dispatch('fetchArticle', route.params.id)
  },

  async created() {
    this.setDocumentTitle(this.$store.state.article.title)
    this.setDocumentMeta([
      {
        name: 'author',
        content: this.$store.state.article.author
      },

      {
        name: 'description',
        content: this.$store.state.article.description
      },

      {
        name: 'keywords',
        content: this.$store.state.article.keywords
      }
    ])
  }
}
```

If you use SSR, you need to inject the title and meta into html template:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    {{{ meta }}}
  </head>

  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>
```

And make sure set the default values in SSR context:

```js
const context = {
  url: ctx.url,
  title: '',
  meta: ''
}

renderer.renderToString(context, (err, html) => {
  // ...
}
```

## APIs

### vueInstance.setDocumentTitle(title, titleTemplate)
```
title: String.
titleTemplate: String. the template of the title. e.g, '%s - Your Company Name'
```

### vueInstance.setDocumentMeta(name, content)

### vueInstance.setDocumentMeta([ { name, content }, ...])

```
name: The name of <meta>.
content: The content of <meta>.

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