siimee/frontend/src/shared/Sidebar.vue

<template lang="pug">
.sidebar__messages
  h4.message__title {{ title }}
  router-link(:to="`/chats/${user.uid}`" v-for="user in users" :key="user.uid" :class="[uid == user.uid ? 'active' : '',  'sidebar__message']")
    .message__left
      p avatar and status
    .message__right
      h4.message__name {{ user.name }}
      p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
</template> 

<script>
export default {
  data() {
    return {
      title: 'i am a title',
      uid: 111,
      users: [
        { name:'sample', uid: 111, metadata: { rawMetadata: 'rawmeta' } },
        { name:'usample', uid: 112, metadata: { rawMetadata: 'morerawmeta' } }
      ]
    }
  }
}
</script>