vue.jsgridsome

Can't build Gridsome website with Vue2 Smooth Scroll

It works in develop mode but it does not build: 'ReferenceError: window is not defined'

I do understand it is a problem with SSR support, although it says it has support to it

I have tryed to implement some similar approaches of integration as seen here:

https://gridsome.org/docs/assets-scripts/#without-ssr-support

Import Vue-Navigation-Bar in Gridsome

I've tryed a lot of approaches in main.js and my template.vue files, but I'm failing to understand the logic for adapting the solution perfectly.

My last approach which worked on develop:

On my template.vue file:

<section id="cover"></section>

<ClientOnly><p class="text-light">Text <a :href="href" class="text-light under" v-smooth-scroll="{ duration: 1000, updateHistory: false }">click here</a></p></ClientOnly>

<script>
  import Vue from 'vue'
  import vueSmoothScroll from 'vue2-smooth-scroll'
  Vue.use(vueSmoothScroll)
</script>

Also have tryed to set 'container' option to '#app' or '#body' added to the body, but it didn't work not even in develop.

Solution

  • OK, I could find it here:

    https://github.com/gridsome/gridsome/issues/180#issuecomment-513550238

    It doesn't need <ClientOnly></ClienteOnly> tags in template.vue file

    In main.js, I have made this changes:

    //import vueSmoothScroll from 'vue2-smooth-scroll'
//Vue.use(vueSmoothScroll);

export default function (Vue, { router, head, isClient }) {
  ...
  if (process.isClient) {
    const vueSmoothScroll = require('vue2-smooth-scroll').default;
    Vue.use(vueSmoothScroll);
  }
}