Nuxt.js: render function or template not defined in component: anonymous

[jasmineY]

I use vue-scroller of the vue Plugins in my project. It work on the initial load but when the page is refreshed，I get 2 errors, the first is "document is not defined" then if I refresh the page again i'll get "Error: render function or template not defined in component: anonymous".

I have already set SSR to false for vue-scroller in the nuxt.config.js but not resolved the 'document is not defined'

So, can you help me?

.vue file

   <template>
       ...
        <scroller style="top: 97px" :on-infinite="loadMore">
        </scroller>
     ....
    </template>
    ...
    <script>
         import Vue from 'vue';
         import Scroller from 'vue-scroller';
         Vue.use(Scroller)
        ...
    </script>

---

nuxt.config.js

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

---

vue-scroll.js

import Vue from 'vue';
import Scroller from'vue-scroller';

Vue.use(Scroller);

_{This question is available on Nuxt.js community (#c904)}

[pi0]

Hey. Two potentially typos in your .vue example. You should only have one root element inside <templates. Also Vue.use should not be inside .vue anymore (or you will get more SSR problems). Please provide your full .vue file for better help.

[homerjam]

in vue-scroll.js

Can you try:

Vue.component('scroller', Scroller);

I had a similar issue with vue-flickity

[kennsand]

I also have the same problem, trying to use Vue.component ('scroller', Scroller); but it doesn't work.

[syffs]

@kennsand try this
as specified, do not import the component when you want to use it, as it's registered globally

[janein]

@syffs thanks a lot - this helped me fixed my problem.
It doesn't matter in my case, but isn't it bad that i have to declare the component globally?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.