0.0.4 • Published 8 years ago
vue-doctitle v0.0.4
vue-doctitle
Simple plugin for switching document title on transitions between routes (for VueRouter)
Installation
You can install this plugin globally or included in dependencies
(in package.json)
$ npm install vue-doctitle
Functionality and features
- Switching page(document) title on transitions between routes
Integration
To use VueDocTitle
in your app:
1. Simple Way:
Importing and wrap VueRouter by VueDocTitle plugin
In your entry point (usually it's index.js or main.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueDocTitle from 'vue-doctitle'
...(ignore lines of codes)
var router = new VueRouter({
// your set of options
})
// defTitle in param 2, means default title if not set in any routes
// filter in param 2, means to filter titles as you want
VueDocTitle.wrap(router, { defTitle: 'my app', filter: function (title) { return 'my app - ' + title } })
router.map({
'': {
component: Index
},
'/a': {
component: A,
doctitle: 'my app - component a' // special document title of component A
}
...(other routes)
})
router.start(...) // start
...(ignore lines of codes)
NOTE:
VueDocTitle.wrap
must be invoked beforerouter.start
2. Directive Way:
Importing and registering VueRouter plugin
In your entry point (usually it's index.js or main.js)
import Vue from 'vue'
import VueDocTitle from 'vue-doctitle'
...(ignore lines of codes)
Vue.use(VueDocTitle)
use directive in page components
1.dynamic (bind prop or data)
<template>
<template v-doctitle="boundPropsOrData"></template>
<...> <!-- other elements of component -->
</template>
2.literal
<template>
<template v-doctitle.literal="my app - component xx"></template>
<...> <!-- other elements of component -->
<template>
NOTE:
Ways above can be used together if both ways used, the directive way is prior