This is a lightweight notice plugin.

⚠️ This plugin is in development, so please let me know if you find any errors.

# npm
npm install x5-notify

This plugin does require a Vuex store and can be installed like any Vue plugin in your entry point:

Vue.use(Vuex)
const store = new Vuex.Store()

import x5Notify from 'x5-notify'
Vue.use(x5Notify, store)

new Vue({
  el: '#app',
  store: store,
  render: (h) => h(App),
})

This plugin uses a component to house all the magic, so it's recommended to put this near the end of your Vue app (e.g. bottom of your App.vue template)

<div id="app">
  ...
  <x5-notify></x5-notify>
</div>

:info: * Positions options: top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right

⚠️ ** onClose() callbacks disabled for notices exceeding notice limit.

⚠️ This plugin is not transpiled! If you want to include it for use on IE or Edge, you need to add this to your vue.config.js file:

module.exports = {
  transpileDependencies: ['x5-notify']
}

this.$notify('success', 'This is a success notice')

this.$notify({ type: 'success', text: 'This is a success notice', wait: 5 })

Please read CONTRIBUTING.md for the process for submitting pull requests.

• Keagan Chisnall

This project is licensed under the MIT License - see the LICENSE.md file for details

Inspired by:

• The look and feel of alertifyJS
• The size and code of vue-toast-notification by @ankurk91