Implementation of vue-dialog dialog helper with Vuetify.js framework
This module will help you to work with modal dialogs in your project
NOTE: Module is in initial development. Anything may change at any time.
Install the package from npm
npm install vue-tailwind-dialog import Dialog from 'vue-tailwind-dialog' Vue.use(Dialog, { context, property })context- the context of your application, such as store, axios, router etc.property- the property, which will integrate to Vue. Default is$dialog
const res = await this.$dialog.confirm({ text: 'Do you really want to exit?'})const res = await this.$dialog.warning({ text: 'Do you really want to exit?', title: 'Warning'})this.$dialog.error({ text: 'Cannot delete this item', title: 'Error'})let res = await this.$dialog.prompt({ text: 'Your name', title: 'Please input your name' })this.$dialog.notify.success('Success notification') this.$dialog.notify.warning('Warning notification') this.$dialog.notify.error('Error notification') this.$dialog.notify.info('Info notification') this.$dialog.notify.error('No autoclose notification', { timeout : 0 }) this.$dialog.notify.info('Top left notification', { position: 'top-left' }) this.$dialog.notify.info('Bottom right notification', { position: 'bottom-right' } this.$dialog.notify.info('Bottom left notification', { position: 'bottom-left' })To all this simple dialogs you can config your actions, just send
{ actions: { 'false': 'No', 'true': 'Yes' } } // result will be true, false, or undefigned { actions: ['No', 'Yes'] } // result will be 'No', 'Yes', or undefignedYou can also set options
{ actions: [{ text: 'Yes', color: 'blue', key: true, handle: () => { // on button click } }] }