Simple chat layout with vuetify, chat history growing from bottom to top

user_10813252 0
Viewed 3523

I want to create a very simple web chat layout but fail at getting the chat history grow from bottom to top. i would like to stick to the predefined vuetify components and commands and use custom css modifications only if really needed.

The layout should look like this:

enter image description here

  • 3 main columns, in the middle the chat history is displayed from bottom to top
  • a bottom bar containing the message field and the send button

Could someone please provide a working skeleton for that?

I am going crazy with this css stuff :(

Thanks four your help!

vuejs2 vuetify.js vue.js css
1 Answers

I have made this whole chat setup for you, please check. The catch is that you need to:

  1. add class="fill-height" on the v-container, to occupy the full viewport
  2. add align="end" to the v-container's v-row, for the messages to appear at the bottom

CODEPEN: https://codepen.io/aaha/pen/abdmazo

<div id="app">
  <v-app app>
    <v-app-bar color="blue" app>
      <v-app-bar-nav-icon>
       <v-icon color="white">mdi-arrow-left</v-icon>    
      </v-app-bar-nav-icon>
      <v-toolbar-title class="white--text"
        >Sushant </v-toolbar-title>
    </v-app-bar>
    <v-container class="fill-height">
      <v-row class="fill-height pb-14" align="end">
        <v-col>
          <div v-for="(item, index) in chat" :key="index" 
              :class="['d-flex flex-row align-center my-2', item.from == 'user' ? 'justify-end': null]">
            <span v-if="item.from == 'user'" class="blue--text mr-3">{{ item.msg }}</span>
            <v-avatar :color="item.from == 'user' ? 'indigo': 'red'" size="36">
               <span class="white--text">{{ item.from[0] }}</span>
            </v-avatar>
            <span v-if="item.from != 'user'" class="blue--text ml-3">{{ item.msg }}</span>
          </div>
        </v-col>
      </v-row>
    </v-container>
    <v-footer fixed>
      <v-container class="ma-0 pa-0">
        <v-row no-gutters>
          <v-col>
            <div class="d-flex flex-row align-center">
              <v-text-field v-model="msg" placeholder="Type Something" @keypress.enter="send"></v-text-field>
              <v-btn icon class="ml-4" @click="send"><v-icon>mdi-send</v-icon></v-btn>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-footer>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    chat: [
    ],
    msg: null,
  },
  methods: {
    send: function(){
      this.chat.push(
      {
        from: "user",
        msg: this.msg
      })
      this.msg = null
      this.addReply()
    },
    addReply(){
      this.chat.push({
        from: "sushant",
        msg: "Hmm"
      })
    }
  }
})
user_24634030
Related