Vue Page Title

!Vue.js html/page title manager

   

  

 

Install 

``shell
yarn add vue-page-title # npm i vue-page-title
`

Setup

`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

$3

| 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.

$3

| 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

$3

`vue



`

`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);
});
`

$3

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 mixin must be true.

`vue



`

#### Function title

You are able to turn the title changes acative, like a computed.

`vue



`

This is particularly useful for internationalization.
This is an example using vue-i18n@9.

`js
export default {
title: ({ $t }) => $t('pages.clients.title'),
};
`

Vue Router integration

$3

`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,
});
`

$3

`js
export default {
title() {
return My title is: ${this.$route.query.foo};
},
};
``