Skip to content

vinicius73/vue-page-title

Repository files navigation

Vue Page Title

Vue.js html/page title manager

Maintainability Test Coverage Scrutinizer Code Quality Build Status

Known Vulnerabilities Known Vulnerabilities Tests

Example App Doctype

Install npm version

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

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