@homerun/vue-page-title v1.0.1
vue-page-title
Vue.js page title manager
Requirements
Vue ^2.0.0
Install
Install the npm package
yarn add @homerun/vue-page-title
Install the plugin inside your application
import Vue from "vue"
import VuePageTitle from "@homerun/vue-page-title"
Vue.use(VuePageTitle)
Usage
Use the title
option inside your component to update the HTML document title.
export default {
name: "MyComponent",
title: "My title"
}
It is also possible to set the title manually. This works perfectly when data comes from an async operation and the page title value depends on it.
export default {
name: "MyComponent",
mounted () {
this.$setPageTitle("My title")
}
}
Prefix and Suffix
Add a suffix to the page title
import Vue from "vue"
import VuePageTitle from "@homerun/vue-page-title"
Vue.use(VuePageTitle, {
suffix: "MyApp" // default value: null
})
Add a prefix to the page title
import Vue from "vue"
import VuePageTitle from "@homerun/vue-page-title"
Vue.use(VuePageTitle, {
prefix: "MyApp" // default value: null
})
The plugin will add prefix and suffix to the value of the page title separated by a divider. In case there is no value set, the prefix or the suffix will be the page title.
Change title divider
import Vue from "vue"
import VuePageTitle from "@homerun/vue-page-title"
Vue.use(VuePageTitle, {
divider: "|" // default value: '-'
})
Render title inside component's template
It's possible to render the title inside the template by using the global available property $title
.
<template>
<div>
<h1>{{ $title }}</h1>
</div>
</template>
The $title
property only renders the value of the title without suffix or divider
Use together with VueRouter
The plugin accepts the VueRouter instance as an optional parameter to track all route titles and automatically apply it to the document title.
import Vue from "vue";
import VueRouter from "vue-router";
import VuePageTitle from "@homerun/vue-page-title";
const router = new VueRouter({
routes: [
{
name: "home",
path: "/",
meta: {
title: "Home page",
},
},
{
name: "about",
path: "/about",
meta: {
title: "About page",
},
},
],
});
Vue.use(VueRouter);
Vue.use(VuePageTitle, {
router,
});
Stop updating title
In specific use cases, we might want to stop updating the document title and keep whatever is the current value by adding the inheritPageTitle
property to true
inside the route meta object
const routes = [
{
name: "home",
path: "/",
meta: {
inheritPageTitle: true, // default value: false
},
},
];
Issues and features requests
Please drop an issue here, if you find something that doesn't work, or request a feature