ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- GO TRY OUT STORYBLOK!!! go.learnvue.co...
RESOURCES
DEMO - demos.learnvue...
useVirtualList - vueuse.org/core/useVirtualList/
useInfiniteScroll - vueuse.org/cor...
✅ Join the LearnVue+ Waiting List - learnvue.co
Get early access to videos, exclusive content, interactive code challenges, and more.
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
MUSIC
Lukrembo - Animal Friends • lukrembo - animal frie...
Lukrembo - Apricity • (no copyright music) l...
Lukrembo - Bake a Pie • lukrembo - bake a pie ...
Lukrembo - Bored • lukrembo - bored (roya...
Lukrembo - Branch • (no copyright music) c...
Lukrembo - Bread • (no copyright music) j...
Lukrembo - Castle • lukrembo - castle (roy...
Lukrembo - Daily • (no copyright music) c...
Lukrembo - Forest • (no copyright music) l...
Lukrembo - Home • lukrembo - home (royal...
Lukrembo - I Always Love You • (no copyright music) l...
Lukrembo - Imagine • (no copyright music) c...
Lukrembo - Lamp • lukrembo - lamp (royal...
Lukrembo - Marshmallow • lukrembo - marshmallow...
Lukrembo - Night • lukrembo - night (roya...
Lukrembo - Pancake • lukrembo - pancake (ro...
Lukrembo - Picnic • lukrembo - picnic (roy...
Lukrembo - Storybook • lukrembo - storybook (...
Lukrembo - Together • lukrembo - together (r...
Lukrembo - Wine • lukrembo - wine (royal...
Lukrembo - Boba Tea • lukrembo - boba tea (r...
#vuejs #vue #javascript #webdev
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
Was about to ask the same thing! 😅
Yea variable height would be a must for example in a list of chat messages
use DynamicScroller from Akryum
vue-virtual-scroller
These kind of step by step tutorials are realy helpful. Keep it up. Awesome content 👍🏻🤠
glad to hear! i want to make both conceptual videos, but also more specific tutorials!
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.
yeah definitely something i want to do too. i'm still looking for the best way to calculate height from the text. but useVirtualList's itemHeight can accept a function like (index) => number so trying to start there.
What happens if the individual item has a random height?
like facebook posts
Looks like it's been two years, and no answer at all
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
you're the second person to say this! glad my timing was good on this video haha
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!
Love this comment
Once again you don't disappoint, like the video before watching, and loved it
Your tutorials are GOLD ! thank you
💚💚
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.
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.
I appreciate it. Hopefully the community continues to support me and the channel so it can keep growing!
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
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...
the algorithm is getting too good 👀
This kind of videos are amazing, super helpful, thank you so much !
i really apreciate your help with dowloanding this software
one of the best explanations
Your vids are so good bro, thank you
Thank you so much this helped a lot!!!! You saved my life
Great one as always
💚
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.
thanks for the help it help my every thing i need to install
Thank you, this was really helpful!
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!
Woah, great video mate!
Nice 👌 question can be used for a grid list of cards or card displayed flex, flex direction row and flex-wrap wrap?
thank you so much dude you're a god
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?
Nice content as always!
Worked, thx
Amazing video!
thank you very much ❤❤
Thanks for watching ❤️❤️
Works well!! DANKEEE
yo bro, really thankya. Big respect
Glad it helped
I tried using this in my app since I am rendering many data. However, it didn't work. Is it possible that the reason is that the scrollable content is a table and not a div? Does that matter or did I just forget to do something?
There is a CSS property (content-visibility : auto) that makes browsers do similar work and do not break document search, safari and firefox are not implementing it yet.
i'm interested to see benchmarks with vue's vdom using content-visibility. also hope it gets more browser support.
Great video!
Great video thabbk you
Wonder whether there would be a way to wrap the virtual list in a grid.. should try it out
im curious too! let me know how it goes
can anyone tell me why it is not working now and official document says use another package instead
how can i use with inertia
Very helpful
It's kinda hard to implement if you have a dynamic height element.
Amazing video! Very useful
glad you like it :)
Amazing!
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.
Does this work for vue2 as well?
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?
What if item height is dynamic?
hey added a pinned comment talking about this! sorry i missed it in the video though :/
thanks helpful vid
That's amazing! Very useful video. I will surely be implementing that on my Vue apps. Just one question... How would you handle the itemHeight propery if list items could vary in size? Like in the Twitter example some items have 3 lines of text but others only 1, and maybe some have media files.
I see that useVirtualList accepts a function for the itemHeight prop and gives me the index of the element. I just don't know how to calculate the height that text would take after wrapping into multiple lines. Do you know how to do that?
hmmm - im not sure about the exact implementation, but i know vue-virtual-scroller had that functionality for vue 2...maybe their source code might give some answers? github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/src/components/DynamicScroller.vue
would love to know if you find out a good way to do it
@@LearnVue I will take a look at it to see what I can find. Thank you very much!
Is there a way to implement this for a page mode? Meaning scrolling of the page would use the virtual list without any nested scrollbars?
my demo sets the width to the full screen width. does it still show multiple scrolls for you?
scroll bar displays are hard to manage cross-browser and user settings wise - but hiding the scroll bar via css could be an option.
@@LearnVue I will have to give it a try. I also need some content to be above and bellow the list for my case - the list is just a part of the page.
Tnx nice video
What font did you use when you pulled up the “yarn add @vueuse/core”? 2:12
DM mono 🔥
Does this work with horizontal lists?
the useInfiniteScroll can work in any direction, but from what I can find - the useVirtualList composable only goes vertically. but the principles should work the same if you roll your own virtual list logic
@@LearnVue got it. Thanks
that is great
Awesome tutorials! But what if we have dynamic height for list item?
I have a question?
it doesn't work & I'm understand nothing.
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!
I believe this is correctly copied - but I could be mistaken:
import { ref } from 'vue'
import { useVirtualList, useInfiniteScroll } from '@vueuse/core'
const data = ref(Array.from(Array(500).keys(), () => 'Lorem Ipsum'))
const { list, containerProps, wrapperProps } = useVirtualList(data, {
// Keep 'itemHeight' in sync with the item's row.
itemHeight: 96
})
useInfiniteScroll(
containerProps.ref,
() => {
// load more
data.value.push(...Array.from(Array(10).keys(), () => 'More Lorem Ipsum'))
},
{
distance: 10
}
)
Item #{{ index }}
{{ data }}
For once, the software is actually really useful
love it
mine too
reddit developers, add this thing, please 🙏... I know that it is not on vue, but do something similar
amazingggggg
+sub
hahsdhahah good
k; nbj
thank you so much dude you're a god
Works well!! DANKEEE
Works well!! DANKEEE