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