Changing the page title in your Vue SPA application is not as straightforward as you would think. In this article, I will show you a few ways how you can easily change the page title when navigating your application.

First off, you will need to have installed the Vue Router.

npm add vue-router

Vue Router is a routing library for built for Vue! It allows you to create routes in your application that map to specific components, which can then be rendered within the application. For example, you could use Vue Router to create routes for a dashboard page, a user profile page, and a settings page, and then use the router to navigate between them. This makes it easier to build a single-page application (SPA) that has multiple views and a consistent structure.

When navigating between pages in the app, it would be ideal if the Page Title updates. Unfortunately, it does not out of the box, which is why their needs to be done a bit of work to make that happen!

Configure Vue Router

As mentioned, we need to do a bit of work which includes configuring the Vue Router to change the page title dynamically! We can make use of the beforeEach guard on the router instance.

The beforeEach guard is called before each route is resolved, and it allows you to modify the route or perform some some sort of action before navigating to the route.

Below you can find a simple example of how you can use the beforeEach guard to update the page title:

router.beforeEach((to, from, next) => {
  // Get the page title from the route meta data that we have defined
  // See further down below for how we setup this data
  const title = to.meta.title
// If the route has a title, set it as the page title of the document/page
  if (title) {
    document.title = title
  }
  // Continue resolving the route
  next()
})

Using the above, we can define metadata on our route. Below is an example of how you would add the metadata to the route.

{
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard/home.vue'),
    meta: {
      title: 'Welcome to the dashboard'
    }
}

You can also use this technique to update other metadata, such as the page description or keywords, in a similar way.

This way we can easily add titles to our pages in our application. One thing you might have noticed is that these are still somewhat “hardcoded” page titles. Let’s try and take a look at how we can make the page titles more dynamic.

Dynamically Change Page Title

Imagine that you have a page that shows an article based on an ID.
The example below shows a route that takes an ID

{
  path: '/product/:id',
  name: 'ViewProduct',
  components: {
    default: () => import(/* webpackChunkName: "clients" */ '../views/product/View/Product.vue')
  }
}

For this route, we would like the page title to be dynamic! For instance, if we wanted to have the page title to be the name of the product that we are viewing, we would need to extend the beforeEach code a bit.

router.beforeEach((to, from, next) => {
  // Get the page title from the route meta data that we have defined
  // See further down below for how we setup this data
  const title = to.meta.title

  //Take the title from the parameters
  const titleFromParams = to.params.pageTitle;
  // If the route has a title, set it as the page title of the document/page
  if (title) {
    document.title = title
  }
  // If we have a title from the params, extend the title with the title
  // from our params
  if (titleFromParams) {
    document.title = `${titleFromParams} - ${document.title}`;
  }
  // Continue resolving the route
  next()
})

Next, we will need to pass the page title in the params when using the route in a Vue Component:

<template>
  <router-link :to="{ name: 'ViewProduct', params: { id: product.id, pageTitle: product.name + ' ' + product.date } }">
    Link to Product
  </router-link>
</template>

Now, when entering any random Product using the link, the page title will be equal to the name and date:

pageTitle: product.name + ' ' + product.date

That is it! Now you have dynamic page titles in your application,
I hope it makes sense.