ChatRoom.vue

<template>
  <div class="chat">
    <transition-group enter-active-class="fadeIn">
      <div v-for="(msg, index) in messages" :key="index" class="messages">
        <div :class="index % 2 === 0 ? 'message2' : 'message1'">
          <div :class="index % 2 === 0 ? 'msg2' : 'msg1'">{{ msg }}</div>
        </div>
      </div>
    </transition-group>
    <textarea v-model.trim="message" @keyup.enter="send" cols="30" rows="3"></textarea>
    <button @click="send">Send</button>
  </div>
</template>

<script>
export default {
  name: "ChatRoom",
  data() {
    return {
      message: "",
      messages: []
    };
  },

  methods: {
    send() {
      this.messages.push(this.message);
      this.message = "";
    }
  }
};
</script>


<style scoped>
.chat {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 300px;
}
.message1 {
  display: flex;
  justify-content: flex-start;
}
.message2 {
  display: flex;
  justify-content: flex-end;
}
.msg1 {
  padding: 5px;
  margin: 5px 0 5px 0;
  background-color: crimson;
  border-radius: 5px;
  font-size: smaller;
  color: white;
  max-width: 80%;
}
.msg2 {
  padding: 5px;
  margin: 5px 0 5px 0;
  background-color: deepskyblue;
  border-radius: 5px;
  font-size: smaller;
  color: white;
  max-width: 80%;
}
.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		messages: [],
	},
	mutations: {
		SEND_MESSAGE(state, message) {
			state.messages.push(message);
		},
	},
	actions: {
		sendMessage({ commit }, message) {
			commit('SEND_MESSAGE', message);
		},
	},
	getters: {
		messages: state => state.messages
	},
});

<template>
	<div id="app">
		<div id="nav">
			<router-link to="/">Chat Room</router-link>
		</div>
		<router-view/>
	</div>
</template>

<style lang="scss">
	html, body {
		height : 100%;
	}
	#app {
		height          : 100%;
		display         : flex;
		flex-direction  : column;
		justify-content : center;
		align-items     : center;
	}
</style>