Sometimes, we want to bind the HTML title content with Vue.js.
In this article, we’ll look at how to bind the HTML title content with Vue.js.
How to bind the HTML title content with Vue.js?
To bind the HTML title content with Vue.js, we use the vue-meta package.
To install it, we run
npm i vue-meta
Then we use it by writing
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
metaInfo: {
title: "Default Title",
titleTemplate: "%s | My Awesome Webapp",
},
};
</script>
We add the metaInfo.titleTemplate property to set the title template.
And we set the title to the page’s title.
The title will replace %s.
Conclusion
To bind the HTML title content with Vue.js, we use the vue-meta package.
