vue-headful
Advanced tools
Readme
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, a generic library to set meta tags with JavaScript.
npm i vue-headful
Register the component:
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:
<template>
<div>
<vue-headful
title="Title from vue-headful"
description="Description from vue-headful"
/>
</div>
</template>
vue-headful is only a wrapper around Headful and by itself does not do that much. vue-headful supports all the head properties that are supported by Headful. You can find a non-complete list of head properties in the following example:
<vue-headful
title=""
description=""
keywords=""
image=""
lang=""
ogLocale=""
url=""
/>
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 <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 id="aPageId">
<h1 data-foo="bar"></h1>
-->
If you want to remove a previously defined attribute from an element, you can set it to null 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>
<meta itemprop="name">
<meta property="og:title">
<meta name="twitter:title">
<meta name="description"/>
<meta itemprop="description">
<meta property="og:description">
<meta name="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>
export default {
data() {
return {
title: 'Dynamic title',
};
},
mounted() {
// dummy async operation to show watcher on properties
setTimeout(() => {
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 at https://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 at Headful: Compatibility.
FAQs
Set <head> properties (e.g. title and meta tags) in Vue.js apps.
The npm package vue-headful receives a total of 916 weekly downloads. As such, vue-headful popularity was classified as not popular.
We found that vue-headful demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.