Add Metadata to our Vue App with vue-meta

To add meta tags easily in our Vue app, we can use the vue-meta library.

In this article, we’ll look at how to use the Vue Meta library to let us add meta tags to our Vue app.

Installation

We can install it by running:

yarn add vue-meta

or

npm i vue-meta

Also, we can include the library directly with a script tag.

The dev version can be added by writing:

<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>

and the production version can be added by writing:

<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>

Adding the Meta Tags

To add the tags, we have to register the plugin.

To do that, we write:

import Vue from "vue";
import App from "./App.vue";
import VueMeta from "vue-meta";

Vue.use(VueMeta);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

in main.js to add the plugin.

We can also add an object with some options as the 2nd argument:

import Vue from "vue";
import App from "./App.vue";
import VueMeta from "vue-meta";

Vue.use(VueMeta, {
  keyName: "metaInfo",
  attribute: "data-vue-meta",
  ssrAttribute: "data-vue-meta-server-rendered",
  tagIDKeyName: "vmid",
  refreshOnceOnNavigation: true
});
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

keyName is the name of the component option that has all the information to convert to meta tags and attributes.

attributre is the name of the attribute to let vue-meta know how it should manage and ignore.

ssrAttribute is the name of the attribute that’s added to the html tag to inform vue-meta that the server has generated the meta tag.

tagIDKeyName is the property that tells vue-meta to overwrite an item in a tag list.

refreshOnceOnNavigation pauses update once page navigation starts and resume updates when navigation finishes when it’s true .

It can help improve speed and fix flickering when replacing styles.

Once we have registered the plugin, we can add the metaInfo property to add the meta tags:

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

<script>
export default {
  name: "App",
  metaInfo: {
    title: "App Title",
    titleTemplate: "%s | My Awesome Webapp"
  }
};
</script>

The title property adds the title that will be replaced with the placeholder.

This means 'App Title' will replace the %s placeholder to form the text content of the title tag.

We can add the style tag to the head with vue-meta. For example, we can write:

<template>
  <div id="app">
    <div class="loading">loading</div>
  </div>
</template>

<script>
export default {
  name: "App",
  metaInfo: {
    style: [
      {
        vmid: "page-load-overlay",
        innerHTML: `
          body div.loading {
            z-index: 999;
            background-color: yellow;
            opacity: 0.9;
          }
        `
      }
    ]
  },
  data() {
    return {
      cssTexts: []
    };
  },
  mounted() {
    this.cssTexts.push({
      vmid: "page-load-overlay",
      innerHTML: null
    });
  }
};
</script>

We set the style property to an object with the values.

Also, we can load the styles dynamically:

<template>
  <div id="app">
    <div class="loading">loading</div>
  </div>
</template>

<script>
export default {
  name: "App",
  metaInfo() {
    const style = this.cssTexts;
    return { style };
  },
  data() {
    return {
      cssTexts: []
    };
  },
  mounted() {
    this.cssTexts.push({
      vmid: "page-load-overlay",
      innerHTML: `
        body div.loading {
          z-index: 999;
          background-color: yellow;
          opacity: 0.9;
        }
      `
    });
  }
};
</script>

The this.cssTexts.push pushes the style.

Conclusion

We can add metadata to the head tag with the vue-meta library.