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?', }, titleComponent: { type: Object as PropType<Component>, required: false, }, titleComponentProps: { type: Object, required: false, }, content: { type: String, required: false, default: '', }, contentComponent: { type: Object as PropType<Component>, required: false, }, contentComponentProps: { type: Object, 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, },
Preview:
Changelog:
v0.6.2 (08/02/2023)
- pass cancel action
v0.6.0 (05/19/2023)
- add missing title component props
v0.5.0 (04/15/2023)
- feat: add option to use custom component in card title
v0.4.0 (04/05/2023)
- feat: Options API usage
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