Vue UI notifications

component.vue

<template>
  <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutDown">
    <div :class="cssClass" class="ui animated message">
      <i @click="triggerClose(notification)" class="close icon"></i>
      <div v-if="notification.title" class="header">{{notification.title}}</div>
      <p>{{notification.text}}</p>
    </div>
  </transition>
</template>

<script>
export default {
  props: ['notification'],
  data () {
    return { timer: null }
  },
  computed: {
    cssClass () {
      return this.notification.type ? this.notification.type : 'secondary'
    }
  },
  mounted () {
    let timeout = this.notification.hasOwnProperty('timeout') ? this.notification.timeout : true
    if (timeout) {
      let delay = this.notification.delay || 3000
      this.timer = setTimeout(() => {
        this.triggerClose(this.notification)
      }, delay)
    }
  },
  methods: {
    triggerClose (notification) {
      clearTimeout(this.timer)
      this.$emit('close-notification', notification)
    }
  }
}
</script>

notification.vue

<template>
  <div class="ui-notifications">
    <notification
      v-for="notification in notifications" :notification="notification" @close-notification="remove">
    </notification>
  </div>
</template>

<script>
import Notification from './notifications/component'
import 'animate.css'

const NotificationStore = {
  state: [],
  addNotification (notification) {
    this.state.push(notification)
  },
  removeNotification (notification) {
    let index = this.state.indexOf(notification)
    this.state.splice(0, 1)
  }
}

export default {
  props: ['message'],
  components: { Notification },
  data () {
    return {
      notifications: NotificationStore.state
    }
  },
  mounted () {
    if (this.message)
      this.notifications.push(this.message)
  },
  methods: {
    remove (notification) {
      NotificationStore.removeNotification(notification)
    },
    add (notification) {
      NotificationStore.addNotification(notification)
    }
  }
}
</script>

<style>
  .ui-notifications {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 350px;
    z-index: 1000;
  }
</style>