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

Is there a version that can be used in vue3? #313

Open AmKang opened 3 years ago

AmKang commented 3 years ago

Hello, is there a version suitable for vue3, or use examples?

wobsoriano commented 3 years ago

You can use this inside a Vue 3 app via https://github.com/privatenumber/vue-2-3

Here's a working example https://codesandbox.io/s/vue3-infinite-loading-63rqj

https://github.com/wobsoriano/vue3-infinite-loading

nVitius commented 3 years ago

I've also made a PR with support for Vue 3: https://github.com/PeachScript/vue-infinite-loading/pull/312

I'm not sure if @PeachScript is still maintaining this repo though.

Botz commented 3 years ago

thanks @nVitius

wobsoriano commented 3 years ago

I've also made a PR with support for Vue 3: #312

I'm not sure if @PeachScript is still maintaining this repo though.

Awesome!

PeachScript commented 3 years ago

Thanks for the greate work from @nVitius , there has an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the #312 branch, as the temporary way for Vue.js 3.0 projects. PR #312 still need some time to be reviewed.

It would be better if you could test it with your projects and feedback :D

liho98 commented 3 years ago

Thanks for the greate work from @nVitius , there has an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the #312 branch, as the temporary way for Vue.js 3.0 projects. PR #312 still need some time to be reviewed.

It would be better if you could test it with your projects and feedback :D

slots not working

totallynotbakadestroyer commented 3 years ago

Thanks for the greate work from @nVitius , there has an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the #312 branch, as the temporary way for Vue.js 3.0 projects. PR #312 still need some time to be reviewed. It would be better if you could test it with your projects and feedback :D

slots not working

For me, they are working greatly in Vue 3. What's your issue? image image

liho98 commented 3 years ago

Thanks for the greate work from @nVitius , there has an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the #312 branch, as the temporary way for Vue.js 3.0 projects. PR #312 still need some time to be reviewed. It would be better if you could test it with your projects and feedback :D

slots not working

For me, they are working greatly in Vue 3. What's your issue? image image

Thanks, its working, my bad i was using <slot name="spinner">hey loading...</slot>, after try your code snippet with <template #spinner>hey loading...</template>, and its working. Thanks you!

gavrashenko commented 3 years ago

Version for Vue3 ( https://github.com/ts-pro/vue-eternal-loading ) can be used with TS / JS / Browser. Native visibility detection based on Intersection Observer.

wobsoriano commented 3 years ago

Here's another one if you don't want to install any https://gist.github.com/wobsoriano/41a01290a9967c7f39077fe5c4a70436

AndreiHudovich commented 2 years ago

Version for Vue3 ( https://github.com/ts-pro/vue-eternal-loading ) can be used with TS / JS / Browser. Native visibility detection based on Intersection Observer.

@gavrashenko Almost seamlessly replaced "vue-infinite-loading" with your library. Works perfectly! Way to go!

lk77 commented 2 years ago

Hello,

any news ?

the vue 3 version is still in alpha ?

And btw using <template #spinner/> causes an error :

vue-infinite-loading.esm.js?3790:451 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at eval (vue-infinite-loading.esm.js?3790:451:1)
    at Array.forEach (<anonymous>)
    at Proxy.slotStyles (vue-infinite-loading.esm.js?3790:446:1)
    at ComputedRefImpl.reactiveEffect [as effect] (vue.esm-bundler.js?19a6:418:1)
    at ComputedRefImpl.get value [as value] (vue.esm-bundler.js?19a6:1252:1)
    at Object.get [as slotStyles] (vue.esm-bundler.js?19a6:4607:1)
    at Object.get (vue.esm-bundler.js?19a6:9618:1)
    at Proxy.eval (vue-infinite-loading.esm.js?3790:702:1)
    at renderComponentRoot (vue.esm-bundler.js?19a6:2640:1)
    at componentEffect (vue.esm-bundler.js?19a6:7397:1)

it seems it assumes a node will be present in the slot

i fixed it by doing : <template #spinner><div></div></template>

ogulcankarayel5 commented 2 years ago

I am getting this error on alpha version

Uncaught (in promise) TypeError: _ref is undefined

bhanu2217 commented 1 year ago

When are you planning to make official release for support with Vue.js 3?

lk77 commented 1 year ago

@bhanu2217 it does work for vue3, i have an app in production that uses it, however still in alpha

santhanakrishnanstark commented 1 year ago

Hi Guys! it is working fine only with one component. but in my case, I need to implement 3 components and my error was if any one component doesn't have any data to load then the remaining other components also not working. it is stopped on the initial loaded data.

Anyone facing the same issue ? @PeachScript

@lk77 did your vue 3 app have this kindly of multiple infinite loading component on same page ?

lk77 commented 1 year ago

@santhanakrishnanstark no i only have one, so i don't know in your case

santhanakrishnanstark commented 1 year ago

@lk77 , thanks for the reply.

@PeachScript , can you help me with my question, whether this alpha version for vue3 is support with multiple infinite-loading component on same page ?

gitinthehole commented 1 year ago

@PeachScript Wanted to add in another support looking for Vue3 compatibility. Thank you in advance!

vicenterusso commented 1 year ago

+1 waiting for vue3

roelVerdonschot commented 1 year ago

I am getting this error when using "vue-infinite-loading": "^3.0.0-alpha.0-0",

TypeError: Cannot read properties of undefined (reading 'reset')
    at Proxy.identifier (vue-infinite-loading.esm.js:480:25)