vue-scroll-reveal in Gridsome SSR not building

Is it possible to use vue-scroll-reveal with Gridsome? I have had it working in Nuxt with vue-scroll-reveal.js having:

import Vue from 'vue';
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal, {
	reset: false,
	class: 'v-scroll-reveal',
	duration: 500,
	distance: '20px',
	mobile: true,
	interval: 600
});

and then loading main.js with:

plugins: [{src: '~/plugins/vue-scroll-reveal', ssr: false}],

I’ve got vue-scroll-reveal working with gridsome develop but it fails to build with gridsome build because the scroll-reveal package uses another package that tries to use window or document (which you can’t access on SSR) also seen here.

on Girdsome in my main.js I have recently been using:

if (process.isClient) {
	const VueScrollReveal = () => import('vue-scroll-reveal');

	VueScrollReveal().then(scrollReveal => {
		console.log(scrollReveal);
		Vue.use(scrollReveal, {
			reset: false,
			class: 'v-scroll-reveal',
			duration: 500,
			distance: '20px',
			mobile: true,
			interval: 600
		});
	});
}

Which does actually add the VueScrollReveal into the project (I think), but then when viewing the HTML, none of the HTML elements have the v-scroll-reveal which I’ve given them. I’m guessing because on building Gridsome can’t see a use for v-scroll-reveal in HTML so it removes it maybe?

Is there any way you could add this a plugin to Gridsome or help point me in the right direction?

[u12206050]

gridsome-scroll-reveal is published as a drop-in-replacement for vue-scroll-reveal

npm install gridsome-scroll-reveal -S

import GridsomeScrollReveal from 'gridsome-scroll-reveal';

export default function (Vue, { router, head, appOptions }) {
  Vue.use(GridsomeScrollReveal, {
			reset: false,
			class: 'v-scroll-reveal',
			duration: 500,
			distance: '20px',
			mobile: true,
			interval: 600
		})
}

[u12206050]

Hi everyone, I currently have two separate solutions that we can publish, but only want to publish one.

1 Please vote 🚀rocket for the first one; which is simply a fork of vue-scroll-reveal that we can publish as gridsome-scroll-reveal as a simple drop in replacement. eg.

import GridsomeScrollReveal from 'gridsome-scroll-reveal';

export default function (Vue, { router, head, appOptions, isClient, isServer }) {
  Vue.use(GridsomeScrollReveal)

  …
}

2 Else vote 👀 eyes for the second; which is an extra library you include gvue-scroll-reveal that you would use like such within main.js

import VueScrollReveal from 'vue-scroll-reveal';
import GVueScrollReveal from 'gvue-scroll-reveal';

export default function (Vue, { router, head, appOptions, isClient, isServer }) {
  if(isServer) {
    Vue.use(GVueScrollReveal)
  } else Vue.use(VueScrollReveal)

  …
}