This package has been deprecated

Author message:

this package has been deprecated in favor of vue-meta

vue-title-switcher

Simple plugin for switching page title on transitions between routes (for VueRouter only)

Demo

Working example

Example sources

Important

You can NOT use this plugin without Vuex

You can NOT use this plugin without VueRouter

Links

• VueRouter
• Vuex

Functionality and features

• Switching page title on transitions between routes

Installation

In your project folder (where is package.json)

$ npm install vue-title-switcher --save

Integration

To use VueTitleSwitcher in your appl you need to do following simple steps:

• Integrate plugin
  • Import and register plugin
  • Add Vuex store module
• Create and adjust the configuration file
• Define titles for pages by adding titleKey option for routes in router config
• Render title in html code

Importing and registering VueTitleSwitcher plugin

In your entry point (usually it's index.js or main.js)

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

var router = new VueRouter({
  // your set of options
})

// Import vuex store
import store from './vuex/store'

import vueTitsConf from './config/vue-tits-conf' //             Import vue-title-switcher config
import vueTitleSwitcher from 'vue-title-switcher' //            Import vue-title-switcher plugin
Vue.use(vueTitleSwitcher, { //                                  Registering vue-title-switcher plugin
  store: store,
  router: router,
  config: vueTitsConf
})

// Import App component - root Vue instance of application
import App from './App'

// Application start
router.start(App, '#app')

Adding Vuex store module

Note that VueTitleSwitcher plugin contains built-in Vuex store module, so if Vuex states and mutations in your application doesn't splitted in sub modules, it's time to do so. How how to split state and mutations into sub modules explaned here http://vuex.vuejs.org/en/structure.html

Also note that it is important to use exact name of module vtsVuexStoreModule in your code.

Code for your store.js

import Vuex from 'vuex'
import Vue from 'vue'
import { vtsVuexStoreModule } from 'vue-title-switcher'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    ... // other modules
    vtsVuexStoreModule
  }
})

Configuration file

export default {
  titleKeyName: 'titleKey',
  defaultTitle: '__title__'
}

Options explanation

• titleKeyName - the name of the key of option for router config, which contains page title or path of a phrase in VueLocalize translations list
• defaultTitle - the default title which will be used if there is no titleKey option defined in the router config for current route

Defining titles for pages by adding titleKey option for routes in router config

Example of the router config with titles for subroutes

export default {
  '/': {
    component: PublicLayout,
    titleKey: false, // will not call Vuex mutation if FALSE
    localized: true,
    subRoutes: {
      '/': {
        name: 'public-index',
        titleKey: 'public.index.title',
        component: PublicIndex
      },
      '/features': {
        name: 'features',
        titleKey: 'f.title',
        component: Features
      },

Rendering in html code

Plugin provides the global mixin named currentTitle which is just a proxy to the Vuex getter

So in your index.html file

<title v-text="currentTitle"></title>

or if using in couple with VueLocalize plugin

<title v-text="$translate(currentTitle)"></title>