Versatile Toast Notification & Dialog Popup Component – Vuetify Notifier

Vuetify Notifier is a versatile popup component used to display customizable toast notifications and alert/confirm/prompt dialog boxes in Vue or Nuxt applications.

How to use it:

1. Install and import the Vuetify Notifier in your Vue or Nuxt projects.

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import VuetifyNotifier from 'vuetify-notifier'
import { VOverlay, VDialog } from 'vuetify/components'  
const vuetify = createVuetify({
  components: { VOverlay, VDialog },
})
const app = createApp(App)
app.use(vuetify)
app.use(VuetifyNotifier, {
  // options here
})
app.mount('#app')

// Nuxt
xport default defineNuxtConfig({
   modules: [
    'vuetify-notifier/nuxt'
   ],
   notifier:{
    // options here
   }
})

2. Available methods to create Toast Notifications & Dialog Popups.

// Alert
alert(content, status, options)
alertSuccess(content, options)
alertInfo(content, options)
alertWarning(content, options)
alertError(content, options)
// Confirm Dialog
confirm(content, status, options)
confirmSuccess(content, options)
confirmInfo(content, options)
confirmWarning(content, options)
confirmError(content, options)
// Prompt Dialog
prompt(content, status, options)

// Toast Notification
toast(content, status, options)
toastSuccess(content, options)
toastInfo(content, options)
toastWarning(content, options)
toastError(content, options)
// Component
component(content, options)

3. Default plugin options.

{
  default: {
    defaultColor: '',
    defaultIcon: 'mdi-alert-circle',
    successIcon: 'mdi-check-circle',
    infoIcon: 'mdi-information',
    warningIcon: 'mdi-alert',
    errorIcon: 'mdi-alert-circle',
    closeIcon: 'mdi-close',
  },
  dialogOptions: {
    transition: 'dialog-bottom-transition',
    width: 500,
    minWidth: 300,
    minHeight: 250,
    textAlign: 'center',
    primaryButtonText: 'OK',
    secondaryButtonText: 'Cancel',
    showDivider: true,
    buttonProps: {
      width: '100',
    },
    dialogProps: {}, // https://vuetifyjs.com/en/api/v-dialog)
    cardProps: {}, // https://vuetifyjs.com/en/api/v-card)
    buttonProps: {}, // https://vuetifyjs.com/en/api/v-btn)
    primaryButtonProps: {}, // https://vuetifyjs.com/en/api/v-btn)
    secondaryButtonProps: {}, // https://vuetifyjs.com/en/api/v-btn)
    handleCancel: 'silent',
    inputProps: {
      // https://vuetifyjs.com/en/api/v-text-field/
      label: 'Input',
    },
  },
  toastOptions: {
    toastProps: {
      // https://vuetifyjs.com/en/api/v-snackbar/
      transition: 'v-scroll-x-transition',
      location: 'top right',
    },
  },
  componentOptions: {
    existsButton: true,
  },
}

Preview: