ionic vue virtual scroll

[randytarampi]

Feature Request

It's not so much a feature request as just a question. I can see that it's supported in @ionic/react and it seems like it just hasn't been gotten to on the Vue side.

Context here is that I'm trying to sell some folks at work on using Ionic+Vue at the moment, but it seems like loading large lists of images is the last stumbling block for our technical demonstrator.

Thanks for reading!

Ionic version:
[x] 4.x

Describe the Feature Request
An ion-virtual-scroll Vue component, per the above.

Describe Preferred Solution
It magically appears in @ionic/vue@0.0.3

Describe Alternatives
I could roll my own solution but if it's as simple as what I think the React port is doing and just passing things along, I figured that I'd ask.

Related Code
N/A

Additional Context
No related code, but the good folks behind @modus/ionic-vue in ModusCreateOrg/ionic-vue#85, pointed me in this direction.

[Livijn]

@randytarampi Did you make any progress on this?

I've tried using vue-virtual-scroll-list and vue-virtual-scroller with no luck.

[liamdebeasi]

Hey everyone,

Our current plan is to recommend solutions built and maintained by the Vue community. We are evaluating vue-virutal-scroller and vue-virtual-scroll-list as potential solutions, but neither have shipped support for Vue 3 yet.

I am going to keep this issue open for now, but will close it out when clearer guidance has been put out on our docs. Thanks!

[JacobFJ]

It seems it doesn't supported yet by both alternatives, any plans to use this built in ionic virtual scroll for vue3? @liamdebeasi

[liamdebeasi]

We do not have plans to use our own custom virtual scroll solution for Ionic Vue. I need to do more research into https://github.com/tangbc/vue-virtual-scroll-list to see what parts of Vue 3 it does not support yet.

[TomDeSmet]

This one is working: https://www.npmjs.com/package/vue3-virtual-scroller

UPDATE
After using it a bit, I decided against using it further. It looked and felt good in the browser, but after compiling to iOS with Capacitor, it looked and behaved kind of strange. I combined kit with sliding-items and those didn't work properly.
Decided to use the infinite-scroll for now. Not ideal, but as I load all my data once and cache it, it's fast enough and it behaves much smoother.

[florian72810]

vue-virtual-scroller has now support for Vue3 (478)

Docs for Vue3 here

[liamdebeasi]

Hi everyone,

We are working on documentation to show how to get your Ionic Vue app setup with packages such as vue-virtual-scroller: ionic-team/ionic-docs#1943

One thing to note is that certain components (like ion-refresher and the collapsible large title) are not currently compatible with virtual scrolling solutions due to their reliance on scrolling on ion-content. I created #23437 which will track progress on improving compatibility with these components.

We are wrapping up the new docs now, so I plan on closing this issue out once those docs ship. Thanks!

[liamdebeasi]

Hi everyone,

We added a Virtual Scroll guide to the Framework v6 docs on how to get setup with a virtual scrolling solution in Ionic Vue: https://beta.ionicframework.com/docs/vue/virtual-scroll

While these are the v6 docs, you should be able to get setup with virtual scrolling in your v5 application (We are shipping the docs for v6 since ion-virtual-scroll will be deprecated then).

I am going to close this issue out since virtual scrolling in Ionic Vue has been documented. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.