Vue-Meta: Adding MetaData to Vue.js Components

4 min read

Vue-Meta: Adding MetaData to Vue.js Components

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.

1
npm install vue-meta --save

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

1
// main.js or index.js
2
import Vue from "vue";
3
import App from "./App.vue"; // main component
4
import Meta from "vue-meta";
5
Vue.use(Meta);
6
new Vue({
7
  render: (h) => h(App),
8
}).$mount("#app");

Adding Metadata

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

1
<template>
2
  <div id="app">
3
    <img width="25%" src="./assets/logo.png" />
4
    <HelloWorld msg="Hello Vue in CodeSandbox!" />
5
  </div>
6
</template>
7
<script>
8
import HelloWorld from "./components/HelloWorld";
9
export default {
10
  name: "App",
11
  components: {
12
    HelloWorld,
13
  },
14
  metaInfo() {
15
    return {
16
      title: "test meta data with vue",
17
      meta: [
18
        {
19
          vmid: "description",
20
          name: "description",
21
          content:
22
            "hello world, this is an example of adding a description with vueMeta",
23
        },
24
      ],
25
    };
26
  },
27
};
28
</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.

In addition, we can set the meta value dynamically based on some logic as we have access to it at a component level.

1
<template>
2
  <div id="app">
3
    <img width="25%" src="./assets/logo.png" />
4
    <HelloWorld msg="Hello Vue in CodeSandbox!" />
5
  </div>
6
</template>
7
<script>
8
import HelloWorld from "./components/HelloWorld";
9
export default {
10
  name: "App",
11
  components: {
12
    HelloWorld,
13
  },
14
  metaInfo() {
15
    const a = "test";
16
    return {
17
      title: "test meta data with vue",
18
      meta: [
19
        ...(a === "test" && [
20
          {
21
            vmid: "description",
22
            name: "description",
23
            content:
24
              "hello world, this is an example of adding a description with vue-meta",
25
          },
26
        ]),
27
      ],
28
    };
29
  },
30
};
31
</script>

Type of Metadata

We can add more or less any type of metadata needed using ‘vue-meta’ plugin whether it is meta, title, link or script.

In the following below we will see an example of how to add some of these metadata.

1
<script>
2
import HelloWorld from "./components/HelloWorld";
3
export default {
4
  name: "App",
5
  components: {
6
    HelloWorld,
7
  },
8
  metaInfo() {
9
    const a = "test";
10
    return {
11
      title: "test meta data with vue",
12
      meta: [
13
        ...(a === "test" && [
14
          {
15
            vmid: "description",
16
            name: "description",
17
            content:
18
              "hello world, this is an example of adding a description with vue-meta",
19
          },
20
        ]),
21
      ],
22
      script: [
23
        {
24
          src: "<https://services.postcodeanywhere.co.uk/js/address-3.91.js>",
25
          async: true,
26
          defer: true,
27
          body: true,
28
        },
29
      ],
30
      link: [
31
        {
32
          rel: "canonical",
33
          href: "<https://malikgabroun.com/>",
34
        },
35
      ],
36
    };
37
  },
38
};
39
</script>

In the above example, we can see how we added an external script to the body using vue-meta. In the case we wanted the script to be included in the head instead, we can do that by removing body flag.

Vmid

So far, we looked into how to setup vue-meta and add metadata to our component dynamically, however, what if we wanted to set the value to the specific property in multiple components and how that would be resolved.

In order to do that, we can use vmid which is a special property that vue-meta provide us in order to resolve the value within the component tree. So if two sets of meta have the same vmid it will override it, using the value from the last updated component (i.e. child component) instead of merging it.

Conclusion

In conclusion, vue-meta is a plugin that in most vue frameworks will come out of the box which allows us and give us the control to how the metadata should show in a website.