How to use Vue plugins with no SSR support on a Gridsome project

1 min read. Published on May 21, 2022. Last updated: May 21, 2022

Written by Leigh Dinaya

Leigh is a passionate web developer who loves to make things work. He likes to build products that solve user's problems.

Ever use a Gridsome plugin that doesn't support SSR? Followed all the instructions on the documentation re how to use the plugin but you still stumble upon errors? Or the plugin works on development but not during build time?

Try this simple fix.

Inside main.js, add your plugin like this:

...

export default function(Vue) {
 Vue.component("Layout", DefaultLayout);

 // browse code only
 if (process.isClient) {
  Vue.use(require("pluginName").default, {
   //properties
  });
 }
}

Say for example you're using a vue-scroll-reveal plugin on your Gridsome project, adding your plugin like this works.

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue) {
  Vue.component('Layout', DefaultLayout)

  // browse code only
  if (process.isClient) {
    Vue.use(require('vue-scroll-reveal').default, {
      reset: true,
      class: 'v-scroll-reveal',
      duration: 500,
      distance: '20px',
      mobile: true,
      interval: 600,
    })
  }
}

That's it. Quick and easy. Hope this helps!

Additional readings:

vue-scroll-reveal in Gridsome SSR not building #543

Gridsome Full Calendar build error - no SSR

Happy Coding

Sign up for our newsletter

Get emails from me about web development, tech, and early access to new articles. I also share pictures of my dogs.