Set page title dynamically in Vue JS

By /

In this article, we will learn how to set/change page titles dynamically in Vue.

By default, in Vue, every page in your application will have the same title that you have set in your public index.html file or will just use the name by which you have named the project.

So, it doesn’t matter which page you visit, the about page or the contact page, Vue will just use the same name as the page title.

So how do we set or change the title of the page based on the route we visit?

Well, there are two ways we can do it,

  1. Using the vue-meta module, and
  2. Using document.title property

Let’s check it with an example.

Set page title using vue-meta in Vue

The vue-meta module lets us set not just page titles but also other meta information like descriptions, script, links, etc.

To use it in our Vue application, first, we have to install it and then configure it in the main.js file.

To install use:

npm i vue-meta
// OR
yarn add vue-meta

Next, we have to configure it in our main.js file like this

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

Once we have installed and configured it, we can use it to change page titles dynamically in your application like this.

<script>
export default {
    metaInfo() {
      return {
          title: this.$route.name,
      };
  },
}
</script>

Using vue-meta you can also set dynamic descriptions and other information in the <head> tag of the document.

However, if you don’t want to use any module to set the page title, then follow the next solution below.

Using document.title to set page title in Vue

The document.title property allows us to set or get the current page title from our document.

So here, we will use this property to set the current page title by assigning the name of the route to document.title property.

Since we are using vue-router in Vue, we can access the router instance using this.$route and to get the name of the route we use this.$route.name and then assign the name to ducument.title property in mounted() hook.

Example:

<script>
export default {
  mounted(){
    var title = this.$route.name
    console.log(title)
    document.title = title
  }
}
</script>

This will set the page title dynamically based on the route we visit in Vue.

Related Topics:

Update component on route change in Vue

Related Posts

Scroll to Top