- Notifications
You must be signed in to change notification settings - Fork17
Set document title and meta tags with Vue.js
License
troxler/vue-headful
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 aroundHeadful, a generic library to set meta tags with JavaScript.
npm i vue-headfulRegister the component:
importVuefrom'vue';importvueHeadfulfrom'vue-headful';Vue.component('vue-headful',vueHeadful);newVue({// your configuration});
And then use thevue-headful component in every of your views:
<template><div><vue-headfultitle="Title from vue-headful"description="Description from vue-headful"/></div></template>
vue-headful is only a wrapper aroundHeadful and by itself does not do that much.vue-headful supports all thehead properties that are supported by Headful.You can find a non-complete list of head properties in the following example:
<vue-headfultitle=""description=""keywords=""image=""lang=""ogLocale=""url=""/>
If there are any other head properties or attributes you want to set, you can usehtml (for arbitrary elements in the whole document) orhead (for elements within<head>) as follows.The selectors can be any valid CSS selector.
<vue-headful:html="{ body: {id: 'aPageId'}, h1: {'data-foo': 'bar'}, }":head="{ 'meta[charset]': {charset: 'utf-8'}, }"/><!-- Results in:<head> <meta charset="utf-8"></head><body><h1 data-foo="bar"></h1>-->
If you want toremove a previously defined attribute from an element, you can set it tonull as in the example below:
<vue-headful:title="null"/><!-- Results in:<title></title><meta itemprop="name"><meta property="og:title"><meta name="twitter:title">-->
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.
<!DOCTYPE html><html><head><title></title><metaitemprop="name"><metaproperty="og:title"><metaname="twitter:title"><metaname="description"/><metaitemprop="description"><metaproperty="og:description"><metaname="twitter:description"></head><body><!-- ... --></body></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.
<template><vue-headful:title="title"description="Static description"/></template><script>exportdefault{data(){return{title:'Dynamic title',};},mounted(){// dummy async operation to show watcher on propertiessetTimeout(()=>{this.title='Dynamic async title';},3000);},};</script>
Also see the non-complete list of meta tags and other head properties you can define using vue-headful:
<html lang><title><meta name="description"><meta itemprop="description"><meta property="og:description"><meta name="twitter:description"><meta name="keywords"><meta itemprop="image"><meta property="og:image"><meta name="twitter:image"><meta property="og:locale"><link rel="canonical"><meta property="og:url"><meta name="twitter:url">
For more information on everything you can put into<head>, have a look athttps://gethead.info/.
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 atHeadful: Compatibility.
About
Set document title and meta tags with Vue.js