Vue.js html/page title manager
Switch branches/tags
Clone or download
Latest commit 0fef393 Sep 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src feat: support custom method of setting title Sep 4, 2018
test test setTitleMethod Sep 4, 2018
.babelrc init tests Jun 24, 2018
.eslintrc.js init Jun 23, 2018
.gitignore demo Jun 23, 2018
.scrutinizer.yml add .scrutinizer.yml Jun 24, 2018
LICENSE add licence Jun 24, 2018
README.md feat: support custom method of setting title Sep 4, 2018
cover.jpg add cover Jun 24, 2018
package.json bump version 1.1.4 Sep 4, 2018
rollup.config.js add banner and es format Jun 23, 2018
yarn.lock update deps Sep 4, 2018

README.md

Vue Page Title

Vue.js html/page title manager

Maintainability Scrutinizer Code Quality Build Status Code Coverage Known Vulnerabilities

Install npm version

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
})