Confirmation Dialog & Snackbar Component – vuetify-use-dialog

A Vue component to create pretty nice confirmation dialogs and snackbar-style notifications based on Vuetify.

How to use it:

1. Import Vuetify & the vuetify-use-dialog component.

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import VuetifyUseDialog from 'vuetify-use-dialog'
import App from './App.vue'
const app = createApp(App)
const vuetify = createVuetify()
app.use(vuetify)
app.use(VuetifyUseDialog)
app.mount('#app')

2. Basic usage.

<template>
  <VBtn @click="handleConfirm">
    Confirm
  </VBtn>
</template>

import { useConfirm, useSnackbar } from 'vuetify-use-dialog'
const createConfirm = useConfirm()
const createSnackbar = useSnackbar()
async function handleConfirm() {
  try {
    await createConfirm({ content: 'This action is permanent!' })
    createSnackbar({ text: 'Confirmed' })
  }
  catch {
    createSnackbar({ text: 'Cancelled' })
  }
}

3. Available props for useConfirm.

title: {
  type: String,
  required: false,
  default: 'Are you sure?',
},
content: {
  type: String,
  required: false,
  default: '',
},
contentComponent: {
  type: Object as PropType<Component>,
  required: false,
},
confirmationKeyword: {
  type: String,
  required: false,
},
confirmationKeywordTextFieldProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
confirmationText: {
  type: String,
  required: false,
  default: 'Ok',
},
cancellationText: {
  type: String,
  required: false,
  default: 'Cancel',
},
dialogProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
cardProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
cardTitleProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
cardTextProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
cardActionsProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
cancellationButtonProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
confirmationButtonProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
theme: {
  type: String,
  required: true,
},
destroy: {
  type: Function,
  required: true,
},
promiseId: {
  type: String,
  required: true,
},

4. Available props for useSnackbar.

text: {
  type: String,
  required: false,
  default: '',
},
contentComponent: {
  type: Object as PropType<Component>,
  required: false,
},
snackbarProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
showCloseButton: {
  type: Boolean,
  required: false,
  default: true,
},
closeButtonProps: {
  type: Object,
  required: false,
  default: () => ({}),
},
closeButtonText: {
  type: String,
  required: false,
  default: 'Close',
},
theme: {
  type: String,
  required: true,
},
destroy: {
  type: Function,
  required: true,
},

Preview:

Changelog:

v0.2.1 (03/20/2023)

• feat: allow passing of props to contentComponent

Download Details:

Author: wobsoriano

Live Demo: https://vuetify-use-dialog.vercel.app/

Download Link: https://github.com/wobsoriano/vuetify-use-dialog/archive/refs/heads/main.zip

Official Website: https://github.com/wobsoriano/vuetify-use-dialog

Install & Download:

# NPM
$ npm i vuetify-use-dialog