Nerds Publishing Monstrosities

    This package has been deprecated

    Author message:

    this package has been deprecated in favor of vue-meta

    vue-title-switcher

    2.0.0 • Public • Published

    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

    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>

    Install

    npm i vue-title-switcher

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • saymon