Vue Page Title

Install

yarn add vue-page-title # npm i vue-page-title

Setup

import Vue from 'vue'
import VuePageTitle from 'vue-page-title'

Vue.use(VuePageTitle, {
  // prefix: 'My App - ',
  suffix: '- My App '
})

Options

Name	Type	Description
suffix	String	suffix for the value of the page title tag
prefix	String	prefix for the value of the page title tag
router	VueRouter instance	if present, allows you to set the title via the route.
setTitleMethod	Function	custom method of setting title

Usage

Just set the title option inside the component.
Within the component it is still possible to update the $title state, it is also available to be used within the component template.

<script>
export default {
  title: 'Page title',
  mounted () {
    const servantTypes = [
      'Ruler', 'Saber', 'Archer', 'Lancer', 'Rider', 'Caster', 'Berserker', 'Assassin'
    ]
    this.$interval = setInterval(() => {
      this.$title = servantTypes[Math.floor(Math.random() * servantTypes.length)]
    }, 2000)
  },
  beforeDestroy () {
    clearInterval(this.$interval)
  }
}
</script>

<template>
  <div>{{ $title }}</div>
</template>

It is also possible to generate a title dynamically, using a function. It receives as an argument the component instance.

export default {
  title: (context) => `Client: ${context.client.name}`,
  data () {
    return {
      client: {
        name: 'Type-Moon.'
      }
    }
  }
}

This is particularly useful for internationalization.
This is an example using vue-i18n.

export default {
  title: ({ $t }) => $t('pages.clients.title')
}

Vue Router usage

Setup

import Vue from 'vue'
import VuePageTitle from 'vue-page-title'

import router from 'path/to/application/router'

Vue.use(VuePageTitle, { router })

// path/to/application/router
import FooComponent from 'path/to/foo-component'
import HomeComponent from 'path/to/home-component'

const routes = [{
  path: '/',
  component: HomeComponent,
  meta: {
    title: 'Home Page' // Title must be a string.
  }
}, {
  path: '/foo',
  component: FooComponent,
  meta: {
    title: 'Foo Page'
  }
}]

export default new VueRouter({
  routes
})