x5 Dialog (Live Demo)

This is a lightweight dialog plugin for Vue.

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

Installation

# npm
npm install x5-dialog

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 x5Dialog from 'x5-dialog'
Vue.use(x5Dialog, 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-dialog></x5-dialog>
</div>

Attribute	Type	Default	Description
zIndex	Number	200	z-index style for plugin

Usage

Custom Modal - this.$modal(component, options)

import CustomComponent from './CustomComponent.vue'

export default {
  methods: {
    open() {
      this.$modal(CustomComponent, { permanent: true })
    },
  },
}

Option	Type	Default	Description
buttons	String	'OK'	Buttons to show (OK, OKCancel, Cancel)
cancelvalue	Any	false	Promise return value on cancel
cancelText	String	Cancel	Cancel button label
data	Any	null	Offers custom component prop 'data'
okValue	Any	true	Promise return value on OK
okText	String	OK	OK button label
onCancel	(async) Function	--	Callback for cancel
onClose	Function	--	Callback for when the modal is closed
onOK	(async) Function	--	Callback for ok
permanent	Boolean	false	Only allow closing the window via provided buttons
title	String	null	Modal header title (leave empty for no header)
width	Number	500	Maximum window width

Dialog - this.$alert(text, options)

this.$alert('This is an alert dialog.')
this.$confirm('A confirm with a title.', { title: 'This is a confirm dialog.' })

ℹ️ Prompt has one extra option to those above

Option	Type	Default	Description
rules	Array	[]	Array of functions to test prompt input against

---

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

Acknowledgments

Inspired by:

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