Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/troxler/vue-headful
Set document title and meta tags with Vue.js
https://github.com/troxler/vue-headful
head html javascript meta-tags metatags seo sharing title vue vuejs
Last synced: about 2 months ago
JSON representation
Set document title and meta tags with Vue.js
- Host: GitHub
- URL: https://github.com/troxler/vue-headful
- Owner: troxler
- License: mit
- Archived: true
- Created: 2018-01-09T17:22:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-26T09:25:34.000Z (about 4 years ago)
- Last Synced: 2024-06-20T05:49:09.936Z (7 months ago)
- Topics: head, html, javascript, meta-tags, metatags, seo, sharing, title, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 140 KB
- Stars: 228
- Watchers: 8
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-headful
vue-headful allows to set the title and several meta tags of your document from any Vue.js view.
vue-headful is a tiny wrapper around [Headful](https://github.com/troxler/headful), a generic library to set meta tags with JavaScript.
## Install
```
npm i vue-headful
```
## Usage
Register the component:
```js
import Vue from 'vue';
import vueHeadful from 'vue-headful';
Vue.component('vue-headful', vueHeadful);
new Vue({
// your configuration
});
```
And then use the `vue-headful` component in every of your views:
```html
```
## Documentation
vue-headful is only a wrapper around [Headful](https://github.com/troxler/headful) and by itself does not do that much.
vue-headful supports all the [head properties that are supported by Headful](https://github.com/troxler/headful#documentation).
You can find a non-complete list of head properties in the following example:
```html
```
If there are any other head properties or attributes you want to set, you can use `html` (for arbitrary elements in the whole document) or `head` (for elements within ``) as follows.
The selectors can be any valid CSS selector.
```html
```
If you want to **remove a previously defined attribute from an element**, you can set it to `null` as in the example below:
```html
```
Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values.
So it is important that you add everything that you want to have populated in your HTML first.
For example, to specify the title and description you have to prepare the HTML as follows.
```html
```
vue-headful also supports dynamic properties (e.g. `v-bind:title="variableName"` or `:title="variableName"`) and adds watchers to everything.
That means you can also set head properties asynchronously, for example after an API request.
```html
export default {
data() {
return {
title: 'Dynamic title',
};
},
mounted() {
// dummy async operation to show watcher on properties
setTimeout(() => {
this.title = 'Dynamic async title';
}, 3000);
},
};
```
Also see the non-complete list of meta tags and other head properties you can define using vue-headful:
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
* ``
For more information on everything you can put into ``, have a look at .
## Compatibility
vue-headful works with every current and most reasonably old web browsers.
If you need to support older browsers including Internet Explorer, have a look at [Headful: Compatibility](https://github.com/troxler/headful#compatibility).