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.

Installation

You can install this package via npm or yarn.

$ yarn add vue-meta
//or
$ 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'

Vue.use(VueMeta)

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:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  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'
    }
  }
</script>

In Home.vue

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

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

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() {
  this.cssTexts.push({
    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.