Not working in Nuxtjs Production Mode

[umardraz]

The plugin is not working in Nuxtjs production mode, would you please help me how we can achieve this.

[monisnap-jason]

Hi @umardraz , I'm having the same problem, did you find a workaround for this ?

[gen4sp]

same

[mguella]

It works in Nuxt.js production mode when setting mode: 'client' in nuxt.config.js (see https://github.com/PeachScript/vue-infinite-loading/issues/209#issuecomment-501440138)

e.g.

plugins: [
    { src: '~/plugins/infinite-load.js', mode: 'client', ssr: false }
]

and when wrapping infinite-loading with a <client-only> tag in the template (see https://github.com/PeachScript/vue-infinite-loading/issues/209#issuecomment-554680722)

e.g.

<client-only>
  <infinite-loading @infinite="next">
    <div slot="no-more"></div>
    <div slot="no-results"></div>
  </infinite-loading>
</client-only>

[menepet]

Here is an updated version instead of using ...

https://medium.com/@sabbir.study/infinite-scroll-in-nuxt-js-f34ee86906cb

[greetfish]

我是这样用的 配置文件 plugins: [ { src: '~/plugins/vue-infinite-loading.js', mode: 'client', ssr: false } ],

~/plugins/vue-infinite-loading.js ` import Vue from 'vue' import InfiniteLoading from 'vue-infinite-loading'

if (typeof document !== 'undefined') { console.log('broswer环境') Vue.component('infinite-loading', InfiniteLoading) } else { console.log('NodeJs环境') } `

使用 <client-only> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </client-only>

特别注意一个深坑：vue-infinite-loading的父元素不能是flex布局的 （farther element can't be flex display）