https://github.com/miaolz123/vue-helmet

A HTML head manager for Vue, edit the page title easily!
https://github.com/miaolz123/vue-helmet

Last synced: about 2 months ago
JSON representation

A HTML head manager for Vue, edit the page title easily!

• Host: GitHub
• URL: https://github.com/miaolz123/vue-helmet
• Owner: miaolz123
• License: mit
• Created: 2016-05-06T14:41:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-28T14:05:12.000Z (over 8 years ago)
• Last Synced: 2024-04-24T22:00:42.117Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 173 KB
• Stars: 65
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-helmet - helmet](https://github.com/nfl/react-helmet), a HTML head manager for Vue, edit the page title easily. By [@miaolz123](https://github.com/miaolz123) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-github-vue - vue-helmet - HTML标题管理器 (实用库)
• awesome-github-vue - vue-helmet - HTML标题管理器 (实用库)
• awesome - vue-helmet - HTML标题管理器 (实用库)
• awesome-vue - vue-helmet - helmet?style=social) - HTML标题管理器 (实用库)

README

        
# vue-helmet

[![npm](https://img.shields.io/npm/v/vue-helmet.svg?style=flat)](https://www.npmjs.com/package/vue-helmet)

[![npm](https://img.shields.io/npm/l/vue-helmet.svg?style=flat)](https://www.npmjs.com/package/vue-helmet)

[![npm](https://img.shields.io/npm/dt/vue-helmet.svg?style=flat)](https://www.npmjs.com/package/vue-helmet)

Like [react-helmet](https://github.com/nfl/react-helmet), a HTML head manager for Vue, edit the page title easily!

# Instllation

### Browser globals

> The **dist** folder contains `vue-helmet.js` and `vue-helmet.min.js` with the component exported in the `window.VueHelmet` object. 

```html

    Vue.use(VueHelmet);

    var vm = new Vue({

        el: "body"

    });

```

### NPM

```shell

$ npm install --save vue-helmet

```

## CommonJS

```js

var VueHelmet = require('vue-helmet');

new Vue({

  components: {

    'vue-helmet': VueHelmet

  }

})

```

## ES6

```js

import VueHelmet from 'vue-helmet'

new Vue({

  components: {

    VueHelmet

  }

})

```

# Example

- vue-router & vue-helmet Example : [Code](//github.com/miaolz123/vue-helmet/tree/gh-pages) | [Demo](//miaolz123.github.io/vue-helmet/)

- ...

# Props

| Prop | Type | Example |

| ---- | ---- | ------- |

| html-attributes | Object | `:html-attributes="{'lang': 'zh-CN'}"` |

| title | String | `title="New Title Here"` |

| base | Object | `:base="{'target': '_blank', 'href': 'http://a.d.c'}"` |

| meta | Object | `:meta="{'description': 'New Description Here.'}"` |

| links | Array | `:links="[{'rel': 'canonical', 'href': 'http://a.b.c'}]"` |

| scripts | Array | `:scripts="[{'type': 'text/javascript', 'src': 'http://abc.xyz/filename.js'}]"` |

# Contributors

- [miaolz123](//github.com/miaolz123)

- [MouCai](//github.com/MouCai)

# License

Copyright (c) 2016 [miaolz123](//github.com/miaolz123) by [MIT](//opensource.org/licenses/MIT)