vue-page-title 2.0.3
Install from the command line:
Learn more about npm packages
$ npm install @vinicius73/vue-page-title@2.0.3
Install via package.json:
"@vinicius73/vue-page-title": "2.0.3"
About this version
yarn add vue-page-title # npm i vue-page-titleimport { createApp } from 'vue'
import { pageTitle } from 'vue-page-title'
const app = createApp(Root)
app.use(pageTitle({
suffix: '- Vue Page Title',
mixin: true,
}));| Vue | Version |
|---|---|
| v2 | v1.* |
| v3 | v2.* |
All resources from v1 works on v2.
Now mixin is optional and must be defined as true to be automatically registered in the app.
| 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 |
| mixin | Boolean |
if true, enable plugin mixin in the components |
| router | VueRouter instance | if present, allows you to set the title via the route. |
| setTitleMethod | Function |
custom method of setting title |
<script>
import { createApp, h, ref, computed, onBeforeUnmount } from 'vue'
import { useTitle } from 'vue-page-title'
const CAPTAINS = [
'Monkey D. Luffy',
'Trafalgar D. Water Law',
'Eustass Kid',
'Shanks',
'Edward Newgate',
'Charlotte Linlin',
'Capone Bege',
'Gol D. Roger'
]
const getCapitain = () => CAPTAINS[
Math.floor(Math.random() * CAPTAINS.length)
]
export default defineComponent({
setup () {
const current = ref('Capitains')
const { title } = useTitle(current)
const refresh = () => {
current.value = getCapitain()
}
const interval = setInterval(refresh, 5000)
onBeforeUnmount(() => {
clearInterval(interval)
})
return {
title
}
}
})
</script>
<template>
<h1>{{ title }}</h1>
</template>const { title } = useTitle('initial title`)const name = ref('initial name')
const { title } = useTitle(name)const product = ref({ name: 'One Piece 1017' })
const { title } = useTitle(() => product.name)const product = ref({ name: 'One Piece 1017' })
const name = computed(() => product.name)
const { title } = useTitle(name)const product = ref({ name: 'One Piece 1017' })
const { setTitle } = useTitle()
watchEffect(() => {
setTitle(product.name)
})With the mixin option enabled, just set the title option inside the component.
Within the component it is still possible to update the $title state using $setPageTitle function, it is also available to be used within the component template.
The option
mixinmust betrue.
<script>
const CREW = [
'Monkey D. Luffy',
'Roronoa Zoro',
'Nami',
'Usopp',
'Sanji',
'Tony Tony Chopper',
'Nico Robin',
'Franky',
'Brook',
'Jinbe',
'Nefertari Vivi'
]
export default {
title: 'Mugiwara no Ichimi',
mounted () {
this.$interval = setInterval(() => {
this.$setPageTitle(CREW[Math.floor(Math.random() * CREW.length)])
}, 2000)
},
beforeDestroy () {
clearInterval(this.$interval)
}
}
</script>
<template>
<h1>{{ $title }}</h1>
</template>You are able to turn the title changes acative, like a computed.
<script>
const EMPERORS = [
'Shanks',
'Marshall D. Teach',
'Monkey D. Luffy',
'Buggy'
]
export default {
title () {
return `🏴☠️ ${this.emperor}`
},
data () {
return {
emperor: 'Four Emperors',
}
},
mounted () {
this.$interval = setInterval(() => {
this.emperor = EMPERORS[Math.floor(Math.random() * EMPERORS.length)]
}, 2000)
},
beforeDestroy () {
clearInterval(this.$interval)
},
}
</script>
<template>
<h1>{{ $title }}</h1>
</template>This is particularly useful for internationalization.
This is an example using vue-i18n@9.
export default {
title: ({ $t }) => $t('pages.clients.title')
}import { createApp } from 'vue'
import { pageTitle } from 'vue-page-title'
import router from 'path/to/application/router'
const app = createApp(Root)
app.use(pageTitle({ router }));path/to/application/router
import { createRouter, createWebHashHistory } from 'vue-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 createRouter({
history: createWebHashHistory(),
routes
})export default {
title () {
return `My title is: ${this.$route.query.foo}`
}
}