Vue Page Title
Install 
yarn add vue-page-title # npm i vue-page-titleSetup
import { createApp } from 'vue';
import { pageTitle } from 'vue-page-title';
const app = createApp(Root);
app.use(
pageTitle({
suffix: '- Vue Page Title',
mixin: true,
})
);Examples
Compatibility
| Vue | Version |
|---|---|
| v2 | v1.* |
| v3 | v2.* |
Migration from v1
All resources from v1 works on v2.
Now mixin is optional and must be defined as true to be automatically registered in the app.
Options
| 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 |
| separator | String |
a string that comes between the prefix and the title / the title and the suffix, defaults to a space |
| 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 |
Usage
Composition API
<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`)React from ref state
const name = ref('initial name');
const { title } = useTitle(name);Use like a watch source argument
const product = ref({ name: 'One Piece 1017' });
const { title } = useTitle(() => product.name);Pass a computed as argument
const product = ref({ name: 'One Piece 1017' });
const name = computed(() => product.name);
const { title } = useTitle(name);Use setTitle to dynamically change the title
const product = ref({ name: 'One Piece 1017' });
const { setTitle } = useTitle();
watchEffect(() => {
setTitle(product.name);
});Mixin
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>Function title
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'),
};Vue Router integration
Setup
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,
});Watching routes
export default {
title() {
return `My title is: ${this.$route.query.foo}`;
},
};