Introducing Vue Meta

Vue Meta is a Vue plugin for managing and creating HTML metadata with built-in reactivity in Vue. You just have to add the metaInfo special property to any of your Vue components and it will automatically be rendered into HTML meta tags, as follows:

// Component.vue
export default {
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

The preceding block of JavaScript code will be rendered into the following HTML tags in your page:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

For more information about Vue Meta, visit https://vue-meta.nuxtjs.org/.

You can see that what you need to do is just provide the metadata in a JavaScript object. Now, let's get it installed and learn how to configure it for a Vue app.