Confirming user choice is a good thing to do, it should also be easy to do.
A module that simplifies the creation of dialogs and snackbars in Vuetify.
Demo: StackBlitz
npm install vuetify-use-dialogInstall the plugin (after vuetify)
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')Call the useConfirm or useSnackbar composable anywhere:
<script setup lang="ts">
import { useConfirm, useSnackbar } from 'vuetify-use-dialog'
const createConfirm = useConfirm()
const createSnackbar = useSnackbar()
async function handleConfirm() {
const isConfirmed = await createConfirm({ content: 'This action is permanent!' })
if (!isConfirmed)
return
createSnackbar({ text: 'Confirmed' })
}
</script>
<template>
<VBtn @click="handleConfirm">
Confirm
</VBtn>
</template>Check this if you're using Options API.
| Name | Type | Default | Description |
|---|---|---|---|
title |
string |
'Are you sure?' |
Dialog title. |
titleComponent |
Component |
Custom title component. | |
titleComponentProps |
object |
{} |
Custom title component props. |
content |
string |
'' |
Dialog content. |
contentComponent |
Component |
Custom content component. | |
contentComponentProps |
object |
{} |
Custom content component props. |
confirmationText |
string |
'Ok' |
Confirmation button caption. |
cancellationText |
string |
'Cancel' |
Cancellation button caption. |
dialogProps |
object |
{} |
VDialog props. |
cardProps |
object |
{} |
VCard props. |
confirmationButtonProps |
object |
{} |
VBtn props for the confirmation button. |
cancellationButtonProps |
object |
{} |
VBtn props for the cancellation button. |
cardTitleProps |
object |
{} |
VCardTitle props for the dialog title. |
cardTextProps |
object |
{} |
VCardText props for the dialog content. |
confirmationKeyword |
string |
undefined |
If provided the confirmation button will be disabled by default and an additional textfield will be rendered. The confirmation button will only be enabled when the contents of the textfield match the value of confirmationKeyword. |
confirmationKeywordTextFieldProps |
object |
{} |
VTextField props for the confirmation keyword textfield. |
cardActionsProps |
object |
{} |
VCardActions props. |
actionsContentComponent |
Component |
{} |
Custom actions content component. |
| Name | Type | Default | Description |
|---|---|---|---|
text |
string |
'' |
Snackbar text. |
snackbarProps |
object |
{} |
VSnackbar props. |
showCloseButton |
boolean |
true |
Show the close button. |
closeButtonText |
string |
'Close' |
Close button text |
closeButtonProps |
object |
{} |
VBtn props. |
Global options:
app.use(VuetifyUseDialog, {
confirmDialog: {
// useConfirm options
title: 'Are you sure?'
},
snackbar: {
// useSnackbar options
snackbarProps: {
timeout: 2000,
}
}
})Looking for a stackable toast component? Check out Vuetify Sonner.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent