Blog Detail


Manage HTML metadata in Vue.js components with SSR support cover image

arrow_back Manage HTML metadata in Vue.js components with SSR support

Vue Meta is a Vue.js plugin that allows you to manage your app’s metadata. It is inspired by and works similarly to react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component’s data using the metaInfo property.

These properties, when set on a deeply nested component, will cleverly overwrite their parent components’ metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.


You can install this package via npm or yarn.

$ yarn add vue-meta
$ npm i vue-meta

If you add vue-meta with a package manager, you will need to install the vue-meta plugin manually:

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


Defining metaInfo

You can define a [keyName] property in any of your components, by default this is metaInfo.

See the API for a list of recognized metaInfo properties

In App.vue:

  <div id="app">

  export default {
    name: 'App',
    metaInfo: {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: 'Default Title',
      // all titles will be injected into this template
      titleTemplate: '%s | My Awesome Webapp'

In Home.vue

  <div id="page">
    <h1>Home Page</h1>

  export default {
    name: 'Home',
    metaInfo: {
      title: 'My Awesome Webapp',
      // override the parent template and just use the above title only
      titleTemplate: null

Remove parent property by child

If a child returns null as content value then the parent metaInfo property with the same vmid will be ignored

The following might be a bit far-fetched, but it’s just an example

// parent
metaInfo: {
  style: [{
    vmid: 'page-load-overlay',
    innerHTML: `
      body div.loading {
        z-index: 999;
        background-color: #0f0f0f;
        opacity: 0.9;

// dynamically loaded child
metaInfo() {
  const style = this.cssTexts
  return { style }
data() {
  return {
    cssTexts: []
mounted() {
    vmid: 'page-load-overlay',
    innerHTML: null

There are also some other special cases are available in this package. For more details, you can visit its documentation & source code on Github.

Published at : 22-12-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project