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.
