---
title: Building a proper Gun DB + Vue 3 p2p e2e encrypted chat component
date: 2022-08-01
youtube: Fijs0M6fFwc
version: 0.11.0
---

I've had a basic chat component for public and private messaging for quite some time, but after using it for actual talks I quickly found that it gets slower and slower the more messages it gets accumulated. But it's not a bit deal as there's a solution for the problem. All we need is the virtual scroll list component, that renders only the messages that are currently displayed and makes it easy to have even thousands of messages without bloating DOM. The second part of the equation is debouncing the sort function so it will kick in once we have some time to order the messages. These two improvements make Gun-Vue chat components quite useful in real world apps. And remember, it's p2p and e2e encrypted by default, so it's not just an array, but a cryptographically verifiable message flow. 

https://github.com/reactjser/vue3-virtual-scroll-list - Virtual scrolling for long lists like chat messages
https://vueuse.org/shared/refDebounced/#refdebounced - debounced ref docs at Vueuse