How to set a document title in Vue app

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>