hi guys！Do you have any recommended virtual list components?
I'm creating a chat room and need to add a virtual list component to the message list. However, I found that the Nuxt module list doesn't have a virtual list component. I also tried some Vue virtual list components, but some of them I couldn't import (maybe I didn't import them correctly), or there were various problems.
6 Replies
Hi @S22y. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I apologize, but the knowledge sources provided do not contain specific information about recommended virtual list components for Nuxt or creating a chat room with a virtual list.
Nuxt UI, which is an official component library for Nuxt, does not seem to include a virtual list component based on the information available. The documents mainly cover other UI components and features of Nuxt.
For your specific use case of creating a chat room with a virtual list for messages, you may need to look into third-party Vue or Nuxt-compatible virtual list components. However, without more specific information in the knowledge sources, I cannot recommend any particular component or solution.
If you're having trouble importing Vue virtual list components, you might want to check the Nuxt documentation on components to ensure you're importing them correctly in a Nuxt project.
I suggest looking into Vue-specific virtual list components that are compatible with Nuxt 3, or considering building a custom solution using Nuxt's built-in features for optimizing long lists. If you need more specific guidance, you may want to consult the official Nuxt documentation or community forums for up-to-date recommendations on virtual list implementations in Nuxt projects.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@386803087471542272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Vuetify
Virtual scroll component — Vuetify
The Virtual scroll component is a container that renders only visible elements. It is useful when you need to displa...
This is something you'll find in the regular Vue components ecosystem.
And you'd just add it to a Nuxt project like any other regular Vue component.
If someone happens to make a Nuxt module doing the same, then that's just a convenience layer.
Googling "Vue virtual list scroller" brings up all kinds of results.
hey @S22y , try this onehttps://www.npmjs.com/package/vue-virtual-scroller
or you can use
useVirtualList from vueuse useVirtualList
Combine useVirtualList with useInfiniteScroll to handle more advanced use cases, like infinite scrolling.@mdthansil@MakThank you. I'll try them