Vue Chat Scroll Demo

by Theodore Messinezis

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-chat-scroll.min.js"></script>
<div id="app">
  <ul v-chat-scrollyo class="bg-gray-800 m-0 px-8 py-4 overflow-x-auto" style="height: 50vh;">
    <li class="m-4 p-4 bg-white">Okay, let's see what vue-chat-scroll can do.</li>
    <li class="m-4 p-4 bg-white" v-for="message in messages">
      {{ message }}
    </li>
  </ul>
</div>

JavaScript

const messages = [
  "The point of this vue directive is to keep things scrolled to the bottom",
  "Let's load a couple of random bacon related messages.",
  null, null, "Okay, now let's see how this div is always scrolled to the bottom", null, null, null
];

async function bacon() {
  const r = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=1');
  return (await r.json())[0];
}

new Vue({
  el: '#app',
  data: {
    messages: [],
  },
  mounted() {
    var interval = setInterval(() => {
      let message = messages.shift();

      if (message === undefined) clearInterval(interval);
      else if (message !== null) this.messages.push(message);
      else (async () => {this.messages.push(await bacon())})();
    }, 2000);
  }
})