How to get Commento working in Gridsome Vue project?

Question

I have a Gridsome based blog set up that I am now trying to add comments to. I'd like to avoid Disqus so am trying to use Commento. Unfortunately, I can't seem to get it working. I've added the div with an id of commento into my blog page template:

<template>
<Layout :title="$page.blog.title">
    <Header :post="$page.blog" />
    <div class="g8-blog">
        <div class="g8-blog-content" v-html="$page.blog.content" />
        <div id="commento"></div>
    </div>
</Layout>
</template>

And added the link into my metaInfo.

metaInfo() {
    let blog = this.$page.blog;
    return {
        title: blog.title,
        link: [
            { src: 'https://cdn.commento.io/js/commento.js', defer: true }
        ]
    } 
}

When I inspect the page code it looks okay but the Commento comment stuff never renders. Is there something else I need to do?

Answer 1

This one worked for me:

<script>
  export default  {
    metaInfo() {
      return {
        title: this.$page.post.title,
        script: [
          { src: 'https://cdn.commento.io/js/commento.js', defer: true }
        ]
      };
    }
  };
</script>