Vue-chat-simulator

Vue-chat-simulator is a Vue 3.0 component, that can simulate a chat conversation.

Motivation

When I planned my personal website, I was looking for a way to create a more personal experience with the user. So I thought it would be pretty cool to give the user the feeling to communicate directly with him through a kind of chat.

Preview

Demo-App

Demo-App on GitHub

Installation

npm install vue-chat-simulator

Usage

<template>
  <v-chat-simulator :messages="messages" @completed="logNotification"/>
</template>

<script>
import ChatSimulator from 'vue-chat-simulator';

export default {
  components: {
    'v-chat-simulator': ChatSimulator
  },
  data() {
    return {
      messages: [
        'Heey 👋🏽 ',
        'Nice to meet you !',
        'My name is vue-chat-simulator 😄',
        'With me are you able to simulate a chat 💬',
        'Just pass an array of strings and leave the rest to me 😉',
        'Lets have some fun together 🙌🏽',
      ]
    }
  },
  methods: {
    logNotification() {
      console.log('All chat bubbles are completed');
    }
  }
}
</script>