Vue Page Title

Install

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

Setup

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

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

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