search

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.66k stars 366 forks source link

Not working in Nuxtjs Production Mode #266

Open umardraz opened 4 years ago

umardraz commented 4 years ago

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

monisnap-jason commented 4 years ago

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

gen4sp commented 4 years ago

same

mguella commented 4 years ago

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 commented 4 years ago

Here is an updated version instead of using ...

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

greetfish commented 3 years ago

我是这样用的 配置文件 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）