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 #209 (comment))

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 #209 (comment))

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）