Author -  Sai gowtham

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.

main.js
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.

About.vue
<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.

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

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

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY