x5 Notify (Live Demo)

This is a lightweight notice plugin.

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

Installation

# npm
npm install x5-notify

Deployment

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>

| Attribute | Type | Default | Description | | :-------- | :----: | :----------: | :--------------------------------------------------------- | | position | String | bottom-right | Origin of notices - see options below* | | zIndex | Number | 200 | z-index style for plugin | | max | Number | 5 | Limit number of open notices (use 0 to remove limit)** |

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

:warning: ** onClose() callbacks disabled for notices exceeding notice limit.

:warning: 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']
}

Usage

Quick Method - this.$notify(type, text)

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

Full Method: this.$notify(options)

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

| Options | Type | Default | Description | | :----------- | :------: | :------------------: | :----------------------------------------------------------------- | | type | String | default | One of success, warning, error, info, special, default | | text | String | -- | Notice text (required) - can be HTML | | onClose | Function | -- | Callback for when the notice is closed | | onClick | Function | -- | Callback for clicking on the notice | | onClickText | String | "(click to dismiss)" | Description of click action (bottom right hand corner) | | wait | Number | 5 | Time in seconds before notice is destroyed | | closeOnClick | Boolean | true | Closes the notice early if clicked |

Contributing

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

Authors

• Keagan Chisnall

License

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

Acknowledgements

Inspired by:

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