Handling Metadata in Vue with vue-meta

The vue-meta library provides a Vue plugin that allows us to take control of our app’s metadata from a component level. It’s important to curate the metadata of our web apps for SEO, but when working with single-page web applications (SPAs) this can often be a cumbersome task.

Dynamic metadata was already partially covered here, but our goal today is to highlight how the vue-meta plugin handles this for us in a concise, logical way while providing us with even more control over our app’s metadata.

Setup

Since vue-meta is a plugin we’ll need to add the package to our project dependencies. We’ll also need to let Vue know we want to use the vue-meta plugin.

Installation

Install vue-meta with your preferred package manager:

# Yarn
$ yarn add vue-meta
# NPM
$ npm install vue-meta --save

Bootstrap

Bootstrap the vue-meta plugin in your main JavaScript file:

main.js

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

import App from 'App.vue';

Vue.use(VueMeta);

new Vue({
  el: '#app',
  render: h => h(App)
});

If you’re using a routing solution like Vue Router, then you could bootstrap vue-meta in your router.js file:

router.js

import Vue from 'vue';
import Router from 'vue-router';
import VueMeta from 'vue-meta';

Vue.use(Router);
Vue.use(VueMeta);

export default new Router({})

SSR

If you’re using Server Side Rendering you’ll want to bootstrap vue-meta in a file that runs on both the server and the client before the root Vue instance is mounted.

Vue Frameworks

If you’re using a framework that already uses vue-meta, such as NuxtJS, you won’t need to bootstrap. Instead, you should refer to the documentation for your chosen framework. Other frameworks that already use vue-meta include Gridsome, Ream, Vue-Storefront, and Factor.

Plugin Options

vue-meta provides options to customize the plugin’s behavior. NuxtJS takes advantage of this by changing the name of the metaInfo property to head. You could do this by bootstrapping vue-meta like so:

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

import App from 'App.vue';

Vue.use(VueMeta, {
  keyName: 'head'
});

new Vue({
  el: '#app',
  render: h => h(App)
});

Make sure to check out the full list of options available in the official documentation.

#vue #vue-meta #programming #html