Better Rendering Performance with Virtual Lists

Shoot. A lot of yall have mentioned this so it's definitely something I should've included in the video, but.

The itemHeight property can also be a function if your elements have different heights. For example,

{
itemHeight: (index) => index % 2 === 0 ? 500 : 1000
}

This still doesn't answer the question yall have about accepting variable text lengths and converting that to heights and tbh I haven't found out a solution that I like for that yet...So if you have ideas, drop a comment

This kind of videos are amazing, super helpful, thank you so much !

I have a question?
it doesn't work & I'm understand nothing.

Thanks for the explanation of what the function actually did, I was banging my head against the wall because I thought it worked differently, as soon as I saw your explanation the fix was apparent.

I have a question. For example, if the user has millions of data and we are virtualizing the list, which is fine. However, I am curious to know how we should deal with the data. When the scroll hits a particular threshold, we load a new batch of data from the API. Should we concatenate the incoming data to the existing list? This approach may cause performance problems. I'm assuming that if the user scrolls up again, we may need to call the API again to load more data. Please advise.

Once again you don't disappoint, like the video before watching, and loved it

Amazing!

can anyone tell me why it is not working now and official document says use another package instead
how can i use with inertia

This is really cool! Can I use this with a regular table as well? I have a table with 65000 items and I only see 10 at a time.

Does this work for vue2 as well?

Thank you, this was really helpful!

Nice 👌 question can be used for a grid list of cards or card displayed flex, flex direction row and flex-wrap wrap?

Hi, and thanks for the tutorial. I implemented a virtual list but I have a use case that requires the list to be sortable. Is that possible? I tried to sort the list passed as argument to the useVirtualList composable but the list is not being updated, while using filters works fine and the list gets updated.
Am I missing something?

Hi - beautiful work! I created a new Vue project and copied the code you provided. I may have done something incorrectly because my code loads all the elements at once : ( I check the inspector, and it does indeed confirm that all the 50 divs exist. So I changed the data parameter to 100, and sure enough, I have 100 divs that are all built and loaded...

It may be a configuration issue - I don't know.


I'm using Firefox.

Do you happen to have a github repo for this? I would be happy to study it.

Thanks!

This is very helpful since I am fetching a data from an API with 400+ data. Question, because I am confused on how this would work if the v-for list are in 4 columns?

Your vids are so good bro, thank you

hahsdhahah good

thanks helpful vid

i really apreciate your help with dowloanding this software

Worked, thx

Great video!

Works well!! DANKEEE

Awesome tutorials! But what if we have dynamic height for list item?

+sub

Woah, great video mate!

For once, the software is actually really useful

thanks for the help it help my every thing i need to install

reddit developers, add this thing, please 🙏... I know that it is not on vue, but do something similar

Works well!! DANKEEE

I'm not sure about tNice tutorials, but if you wanna fix it open GMS. Then in the GMS, there's a light blue screen with a lot of buttons and other stuff.

thank you so much dude you're a god

Works well!! DANKEEE

Thank you so much this helped a lot!!!! You saved my life

that is great

Very helpful

that you are homo but as I said I can't tell the difference if they make a joke or are actually believing tNice tutorials.

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

Amazing content as always, not sure why your channel is not more popular than it is! Definitely one of the hidden gems for Vue devs.

Does this work with horizontal lists?

Your videos are awesome. Your approach is similar to fireship (which is amazzzzing) but with extra focus on vue (which is more amazzzzzing to me). Thank You!

yo bro, really thankya. Big respect

k; nbj

It's kinda hard to implement if you have a dynamic height element.

one of the best explanations

mine too

thank you so much dude you're a god

Just today I was looking for a library to implement infinite scrolling with Vue and didn't find anything that convinced me. This video comes just in time <3

The algorithm triumphs or am I been monitored😅😅. I am currently building a project at this very moment, where this feature is exactly what I need (14hrs after the video upload).
I just am currently taking a small break and happen to come across this tutorial.
I have an api that displays about 1460 objects in an array. There is no endpoint to comfortably implement pagination on the api. I have been thinking of a solution and wanted to use indexedDB to store the data and build my pagination around indexedDB.
This tutorial just came at the right moment...

Nice content as always!

What if item height is dynamic?