Vue.js html/page title manager
npm install vue-page-title!Vue.js html/page title manager
   
  
 
``shell`
yarn add vue-page-title # npm i vue-page-title
`js
import { createApp } from 'vue';
import { pageTitle } from 'vue-page-title';
const app = createApp(Root);
app.use(
pageTitle({
suffix: '- Vue Page Title',
mixin: true,
})
);
`
#### Examples
- mixin 01
- mixin 02
- composition
| 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.
| Name | Type | Description |
| -------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| suffix | String | suffix for the value of the page title tag |String
| prefix | | prefix for the value of the page title tag |String
| separator | | a string that comes between the prefix and the title / the title and the suffix, defaults to a space |Boolean
| mixin | | if true, enable plugin mixin in the components |Function
| router | VueRouter instance | if present, allows you to set the title via the route. |
| setTitleMethod | | custom method of setting title |
`vue
{{ title }}
`
`ts)
const { title } = useTitle('initial title
``
#### React from ref state
`ts`
const name = ref('initial name');
const { title } = useTitle(name);
#### Use like a watch source argument
`ts`
const product = ref({ name: 'One Piece 1017' });
const { title } = useTitle(() => product.name);
#### Pass a computed as argument
`ts`
const product = ref({ name: 'One Piece 1017' });
const name = computed(() => product.name);
const { title } = useTitle(name);
#### Use setTitle to dynamically change the title
`ts
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. $title
Within the component it is still possible to update the state using $setPageTitle function, it is also available to be used within the component template.
> The option mixin must be true.
`vue
{{ $title }}
`
#### Function title
You are able to turn the title changes acative, like a computed.
`vue
{{ $title }}
`
This is particularly useful for internationalization.
This is an example using vue-i18n@9.
`js`
export default {
title: ({ $t }) => $t('pages.clients.title'),
};
`js
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
`js
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,
});
`
`jsMy title is: ${this.$route.query.foo}
export default {
title() {
return ;``
},
};