<template>
  <div class="notification" v-html="renderedNotification">
  </div>
</template>

<script>
 import UserStub from '@/components/Users/Stub'

 export default {
   name: 'notification',

   components: {
     UserStub
   },

   computed: {
     renderedNotification: function () {
       let s = this.notification.body.split(' ')
       let username = '<router-link :to=\'/users/' + s[0] + '\'>' +
                      s[0] + '</router-link>'
       let rest = s.slice(1)
       return username + ' ' + rest.join(' ')
     }
   },

   props: {
     notification: {
       type: Object,
       required: true
     }
   }
 }
</script>

<template>
  <div class="notification card" >
    <div class="card-block">
      <user-stub :username="notification.actioningUser" />
      {{ actionText }}
      <router-link :to="'/tickets/' + notification.actionedTicket">
        {{ notification.actionedTicket }}
      </router-link>
    </div>
  </div>
</template>

<script>
 import UserStub from '@/components/Users/Stub'

 export default {
   name: 'notification',

   components: {
     UserStub
   },

   computed: {
     actionText: function () {
       return this.notification.body
                  .replace(this.notification.actioningUser, '')
                  .replace(this.notification.actionedTicket, '')
     }
   },

   props: {
     notification: {
       type: Object,
       required: true
     }
   }
 }
</script>

<style>
 .notification .avatar {
   height: 20px;
   width: 20px;
 }

 .notification {
   margin-bottom: 0.5rem;
 }

 .notification .card-block {
   padding: 0.5rem;
 }
</style>

Create vue component for notifications
Create vue component for notifications
