Small Popup Box Replacement With Vue.js – vue-dialog

Install & Download:

# NPM
$ npm install vue-utopia-dialog --save

Description:

Yet another Vue.js component that creates simple clean dialog windows to replace the native JavaScript popup boxes.

Usage:

Install and import the dialog component.

import Dialog from 'vue-utopia-dialog'
import 'vue-utopia-dialog/dist/css/dialog.css'
Vue.use(Dialog)

Create alert/confirm/prompt dialog boxes as these:

// this.$dialog.alert(option)
// this.$dialog.confirm(option)
// this.$dialog.prompt(option)
export default {
  name: 'dialog-test',
  methods: {
    alert () {
      this.$dialog.alert({
        title: 'Alert',
        desc: 'this is an alert!'
      })
    },
    confirm () {
      this.$dialog.confirm({
        title: 'Confirm',
        desc: 'this is a confirm!',
        confirm: () => {
          window.alert('yes')
        },
        cancel: () => {
          window.alert('no')
        }
      })
    },
    prompt () {
      this.$dialog.prompt({
        title: `What's your name?`,
        desc: 'this is a prompt!',
        confirm: text => {
          window.alert(`yes: ${text}`)
        },
        cancel: () => {
          window.alert('no')
        }
      })
    }
  }
}

Preview: