How to set a document title in Vue app

In this tutorial, we are going to learn about how to set a document <title> to the pages in a Vue app using the vue-meta (npm) package.

Installing the vue-meta package

The vue-meta package helps us to set the document title and other meta tags to the current page.

Run the following command to install the package.

npm install vue-meta

To configure the package add the following (highlighted) lines to your main.js file.

import Vue from "vue";
import App from "./App.vue";
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
new Vue({
  render: h => h(App)
}).$mount("#app");

Setting the title

Now, inside our vue components, we can set a title to the page using the metaInfo property.

Here is an example that sets the title to the About page.

<template>
  <div id="app">
    <h1>This About Us Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'About',
    metaInfo: {
      title: 'About Us'    }
  }
</script>

It will render an HTML <title> tag in your page like this.

<title>About Us</title>

If you don’t like to use an external package to set the title, then you can use the document.title property inside the created() lifecycle hook.

<template>
  <div id="app">
    <h1>This About Us Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'About',
    created(){
        document.title = "About Us"    }
  }
</script>