vuetify-use-dialog

vuetify-use-dialog

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

Installation

npm install vuetify-use-dialog

Usage

Install 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.

Options

useConfirm

useSnackbar

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.

License

MIT