Gridsome SEOmatic Example

gridsome-seomatic-example.vue

------------------------
SEOMATIC VUE MIXIN
------------------------
export default {
  methods: {
    seomaticMeta: function(seomaticData) {
      /* 
        code jacked from BEN ROGERSON'S nuxt-seomatic-meta plugin:
        https://github.com/ben-rogerson/nuxt-seomatic-meta/blob/master/lib/plugin.js
      */
      const {
        metaTitleContainer: {
          title: { title },
        },
        metaTagContainer,
        metaLinkContainer,
        metaScriptContainer,
        metaJsonLdContainer,
      } = Object.entries(seomaticData).reduce(
        (acc, [key, value]) => {
          acc[key] = JSON.parse(value)
          return acc
        },
        {},
      )
  
      const meta = metaTagContainer
        ? Object.values(metaTagContainer).reduce(
            (flat, next) => flat.concat(next),
            [],
          )
        : null
  
      const link = metaLinkContainer
        ? Object.values(metaLinkContainer).reduce(
            (flat, next) => flat.concat(next),
            [],
          )
        : null
  
      const metaScripts = metaScriptContainer
        ? Object.values(metaScriptContainer).map(({ script }) => ({
            innerHTML: script,
          }))
        : []
  
      const jsonLd = metaJsonLdContainer
        ? Object.entries(metaJsonLdContainer).map(value => ({
            type: 'application/ld+json',
            innerHTML: JSON.stringify(value),
          }))
        : []
  
      const script = [...metaScripts, ...jsonLd]
      
      return {
        ...(title && { title }),
        ...(meta && { meta }),
        ...(link && { link }),
        script,
        __dangerouslyDisableSanitizers: ['script']
      }
    }
  }
}


------------------------
BLOG.VUE GRIDSOME TEMPLATE
------------------------

<page-query>
  query Entry ($slug: [String], $uri: String) {
    entry (slug: $slug) {
      title
      dateCreated
      dateUpdated
      ... on craft_blog_blog_Entry {
        blogCategories {
          id
          title
          slug
        }
        contentBuilder {
          ... on craft_contentBuilder_cbHeading_BlockType {
            typeHandle
            h2Heading
            h3Heading
          }
        }
      }
    }
    seomatic (uri: $uri, asArray: true) {
      metaTitleContainer
      metaTagContainer
      metaLinkContainer
      metaScriptContainer
      metaJsonLdContainer
    }
  }
</page-query>


<script>
  import seomaticMeta from '../mixins/seomaticMeta';

  export default {
    mixins: [seomaticMeta],
    name: 'BlogEntry',
    metaInfo() {
      const seo = this.seomaticMeta(this.$page.seomatic);
      seo.bodyAttrs = {
        class: 'nav-light',
        id: 'blog-entry'
      }
      return seo;
    }
  }
</script>