Scroller not working with Nuxt (ssr)

[ardian-c]

[siberiadev]

This is a full working example for Nuxt.js:

1. Install vue-infinite-loading npm install vue-infinite-loading -S
2. Create new js file in your /plugins folder of nuxt (/plugins/infinite-loading.js)

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading, {
	props: {
		spinner: 'spiral',
		/* other props need to configure */
	},
	system: {
		throttleLimit: 50,
		/* other settings need to configure */
	},
	slots: {
		noMore: 'No more message', // you can pass a string value
		// error: InfiniteError, // you also can pass a Vue component as a slot
	},
});

3. Add this new plugin to nuxt.config.js in plugins section:

...
plugins: [
		{ src: '@/plugins/infinite-loading', ssr: false }
	],
...

4. Use new component on your pages

<template>
    <div class="page">
        <!-- some content -->
        <infinite-loading @infinite="loadMoreTours"></infinite-loading>
    </div>
</template>
<script>
export default {
    data(){
        return {
           list: [],
           page: 1
        }
    },
    methods: {
        async loadMoreTours($state){
               await this.$axios.$get('/api/link').then(res => {
			this.list.push.apply(this.list, res)
                        if(res.length > 0){
                               this.page++;
                 		$state.loaded();
                        }else{
                                $state.complete();
                        }
	       }).catch(e => {console.log(e)})
            
        }
    }
}
</script>

[kvanska]

using nuxt 2.8.0 and vue-infinite-loading 2.4.4 getting errors:

TypeError: Cannot read property '_infiniteScrollHeight' of null

and

TypeError: Cannot read property 'tagName' of null

[pablocattaneo]

@siberiadev solution works for me, just notice that if you are using Nuxt.js 2.4 or higher es recomended use { src: '@/plugins/infinite-loading', **mode: 'client'** } instead of { src: '@/plugins/infinite-loading', **ssr: false** } because srr:false will be deprecated in next major release.

More info: https://nuxtjs.org/guide/plugins/#client-side-only

[xiaotiandada]

using nuxt 2.8.0 and vue-infinite-loading 2.4.4 getting errors:

TypeError: Cannot read property '_infiniteScrollHeight' of null

and

TypeError: Cannot read property 'tagName' of null

I don't use nuxt, But I show this error too

[louishwy]

@siberiadev this solution also works for me, but once I add

<infinite-loading @infinite="loadMoreData"></infinite-loading>

to my template, I get a Vue error as below:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing

. Bailing hydration and performing full client-side render.

Could you please take a look at it?

[sebmor]

You can solve this by doing

<no-ssr>
<infinite-loading @infinite="loadMoreData"></infinite-loading>
</no-ssr>

But ideally the library builds in a check for window and takes care of this.

[kvanska]

using nuxt 2.8.0 and vue-infinite-loading 2.4.4 getting errors: TypeError: Cannot read property '_infiniteScrollHeight' of null and TypeError: Cannot read property 'tagName' of null

I don't use nuxt, But I show this error too

I made pull request to fix this but didn't get any reply or neighter is this request merged in the project.

[shivanshtalwar0]

with nuxt 2.10.1 you can do something like.

<template>
<client-only>
      <infinite-loading @infinite="infiniteHandler">
        <template v-slot:no-results>
          You haven't ordered any Product
        </template>
      </infinite-loading>
</client-only>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
export default {
name: "orders",
components: { InfiniteLoading},
}

and it should work fine.