import Vue           from 'vue'
import Notifications from 'vue-notification'

/*
or for SSR:
import Notifications from 'vue-notification/dist/ssr.js'
*/

Vue.use(Notifications)

// simple
this.$notify('Hello user!')

// using options
this.$notify({
  title: 'Important message',
  text: 'Hello user!'
});

import Vue from 'vue'

Vue.notify({
  title: 'Authorization',
  text: 'You have been logged in!'
})

plugins: [
    { src: '~/plugins/notifications-ssr', ssr: true },
    { src: '~/plugins/notifications-client', ssr: false }
]

import Notifications from 'vue-notification/dist/ssr.js';
import Vue from 'vue';

Vue.use(Notifications);

import Notifications from 'vue-notification';
import Vue from 'vue';

Vue.use(Notifications);

  this.$notify({
    // (optional)
    // Name of the notification holder
    group: 'foo',

    // (optional)
    // Title (will be wrapped in div.notification-title)
    title: 'This is the <em>title</em>',

    // Content (will be wrapped in div.notification-content)
    text: 'This is some <b>content</b>',

    // (optional)
    // Class that will be assigned to the notification
    type: 'warn',

    // (optional, override)
    // Time (in ms) to keep the notification on screen
    duration: 10000,

    // (optional, override)
    // Time (in ms) to show / hide notifications
    speed: 1000,

    // (optional)
    // Data object that can be used in your template
    data: {}
  })

this.$notify({
  group: 'foo', // clean only the foo group
  clean: true
})

Vue.use(notifications, { name: 'alert' })

this.$notify({ type: 'success', text: 'The operation completed' })

this.$notify({ group: 'auth', text: 'Wrong password, please try again' })

import Vue           from 'vue'
import Notifications from 'vue-notification'
import velocity      from 'velocity-animate'

Vue.use(Notifications, { velocity })

{
  enter: { opacity: [1, 0] },
  leave: { opacity: [0, 1] }
}

computed: {
  animation () {
    return {
      /**
       * Animation function
       * 
       * Runs before animating, so you can take the initial height, width, color, etc
       * @param  {HTMLElement}  element  The notification element
       */
      enter (element) {
        let height = element.clientHeight
        return {
          // animates from 0px to "height"
          height: [height, 0],

          // animates from 0 to random opacity (in range between 0.5 and 1)
          opacity: [Math.random() * 0.5 + 0.5, 0]
        }
      },
      leave: {
        height: 0,
        opacity: 0
      }
    }
  }
}