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