X5-notify NPM | npm.io

x5 Notify (Live Demo)

npm bundle size

This is a lightweight notice plugin.

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

Notices

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