Sometimes, we want to set the HTML title element content in Vue.js.

In this article, we’ll look at how to set the HTML title element content in Vue.js.

How to set the HTML title element content in Vue.js?

To set the HTML title element content in Vue.js, we can use the vue-meta package.

To install it, we run

npm i vue-meta

Then we add it as a plugin with

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

Vue.use(VueMeta)

Next, in our component, we write

<template>
  <div id="app">
...  </div>
</template>

<script>
  export default {
    name: 'App',
    metaInfo: {
      title: 'Title',
      titleTemplate: '%s | My Website'
    }
  }
</script>

to set the metaInfo property to an object with the title properties.

titleTemplate has the template of the title with %s being the placeholder that’s interpolated with the metaInfo.title value.

Conclusion

To set the HTML title element content in Vue.js, we can use the vue-meta package.