What is vue-meta?

“vue-meta” is a module that offers a Vue plugin which allows us to add metadata from component dynamically.

This means in projects where we have multiple routes and we want to update the meta tags for SEO dynamically based on the route currently rendered on the page, vue-meta will handle that for us while giving us control over the app metadata.

---

Setup

First of all, we need to add vue-meta to our project and let Vue know that we want to use it as a plugin available to all components.

npm install vue-meta --save

Then, we add the vue-meta to our main js file.

// main.js or index.js
import Vue from "vue";
import App from "./App.vue"; // main component
import Meta from "vue-meta";
Vue.use(Meta);
new Vue({
  render: h => h(App)
}).$mount("#app");

---

Adding Metadata

Now we look into an example of how to add metadata to our component.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    };
  }
};
</script>

As can be seen, we can do that by calling ‘metaInfo’ function and return an object as a value that will contain our metadata.

#javascript #seo #programming #vuejs #vue