Adding meta data to your Vue site

I expected this to be more of a pain, but in classic Vue style, adding meta data to your Vue site is really simple. The guys at Nuxt have created a great package for handling Vue meta data.

Step 1: Install vue-meta

yarn add vue-meta

Step 2:  Import vue-meta in your router.js file

import Meta from 'vue-meta';

Vue.use(Router);
Vue.use(Meta);

Step 3: Setup your default meta data in your top most component

Typically in your App.vue or Main.vue file, add:

export default {
  name: "home",
  metaInfo: {
    // Children can override the title.
    title: "My Blog",
    titleTemplate: "%s ← Mark Bloomfield's Blog"
  }
  ...
}

The titleTemplate is the complete SEO Title tag string, and %s is the placeholder for the current page title which in this case is 'My Blog'. In the next step, we'll see how this can be updated programatically on dynamic templates.

Step 4: Updating the title on dynamic routes

You can set the metaInfo object on each of your routes and this will override the defaults set in your primary component. 

What about blog routes where you're fetching data that isn't necessarily available when the component renders? It's again really simple. When initialising your Vue instance, just add the following method:

export default {
  name: "Single",
  ...
  metaInfo() {
    return {
      title: this.post.title
    };
  }
};

...where this.post.title is the title of the post that you're showing.

Super simple, and this is just scraping the surface. The package includes a heap of extra tools for just about any type of meta information - including social sharing meta tags.