Nerds Publishing Monstrosities

    This package has been deprecated

    Author message:

    this package has been deprecated in favor of vue-meta


    2.0.0 • Public • Published


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


    Working example

    Example sources


    You can NOT use this plugin without Vuex

    You can NOT use this plugin without VueRouter


    Functionality and features

    • Switching page title on transitions between routes


    In your project folder (where is package.json)

    $ npm install vue-title-switcher --save


    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'
    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

    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'
    export default new Vuex.Store({
      modules: {
        ... // other modules

    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>


    npm i vue-title-switcher

    DownloadsWeekly Downloads






    Last publish


    • saymon