Better Rendering Performance with Virtual Lists

RESOURCES

Get early access to videos, exclusive content, interactive code challenges, and more.

follow me on twitter:

MUSIC
#vuejs #vue #javascript #webdev

[LearnVue]

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

[jingzheshan]

What happens if the individual item has a random height?

[AdarshMadrecha]

These kind of step by step tutorials are realy helpful. Keep it up. Awesome content 👍🏻🤠

[soviut]

Great tutorial. I'll be using this in an upcoming project. One thing I'd like to have seen covered is whether the virtual list can handle variable height content. For example, not every tweet is the same height.

[MuhammadM]

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

[roshanikumbharkar]

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

[yte]

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

[patrickraedler]

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

[ErickMolina-zj]

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

[aliyahjanifahlomondot]

i really apreciate your help with dowloanding this software

[happynewyearw]

Thanks for the awesome video! wonder what's the best way to support dynamic item height? just set the item height in useVirtualList comp. the min height of the range of item heights? any suggestion? thanks!

[Regeneration]

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

[JannisAdmek]

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.

[sostheneintamba]

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

[anparisu]

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.

[takacszoltan]

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

[isidorenwaiwu]

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...

[SerpentsHiss]

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.

[June-cq]

Great video thabbk you
Wonder whether there would be a way to wrap the virtual list in a grid.. should try it out

[DanielTames]

Amazing video!
thank you very much ❤❤