Web Development

npm i --save vue-steam-chat

<template>
  <div style="height: 600px; width: 300px;">
    <VueSteamChat :messages="messages" @vue-steam-chat-on-message="onNewMessage"/>
  </div>
</template>

<script>
import VueSteamChat from "vue-steam-chat";

// This is required for styling the component. You can also write your own stylesheet. You can find my styles inside the vue component
require("vue-steam-chat/dist/index.css");

export default {
  name: "vue-steam-chat",
  components: {
    VueSteamChat
  },
  data() {
    return {
      messages: [
        {
          time: 1506117496,
          username: "Gaben",
          text: "I am really rich!!!"
        },
        {
          time: 1506117500,
          username: "Solo",
          text: "But i am your employee"
        },
        {
          time: 1506117530,
          username: "Neo",
          text: "Hmmm..."
        }
      ]
    };
  },
  methods: {
    onNewMessage(message) {
      alert(message);
    }
  }
};
</script>