Clear all dialogs and notifications

[mohammad-zr]

Is there anyway to clear and remove all dialogs and notifications programmatically?

[AbdelrhmanAbdelhamed]

Please If there any, I'd like to know how as this might come in handy in many situations

[mohammad-zr]

@yariksav do you have any plan to implement this feature?

[AbdelrhmanAbdelhamed]

@Esniper90 I managed to do it using the shown and destroyed events to keep track of the dialogs.

    let _dialogs = []

    Vue.prototype.$dialog.on('shown', ({ dialog }) => _dialogs.push(dialog))

    Vue.prototype.$dialog.on(
      'destroyed',
      ({ dialog }) => (_dialogs = _dialogs.filter((_dialog) => _dialog.id !== dialog.id))
    )

    Vue.prototype.$dialog.clearDialogs = () => {
      _dialogs.forEach((_dialog) => _dialog.remove())
      _dialogs = []
    }

   // Then you can call this.$dialog.clearDialogs() inside any component

[maxmartynov]

Based on the @AbdelrhmanAbdelhamed code. For nuxt.js

// @/plugins/vuetify-dialog/vuetify-dialog.client.js
import Vue from 'vue'

export default () => {
  const _dialogs = []

  Vue.prototype.$dialog.on('shown', ({dialog}) => _dialogs.push(dialog))

  Vue.prototype.$dialog.on('destroyed', ({dialog}) => {
    const index = _dialogs.findIndex((_dialog) => _dialog.id === dialog.id)
    _dialogs.splice(index, 1)
  })

  Vue.prototype.$dialog.clearAllDialogs = () => {
    _dialogs.forEach((_dialog) => _dialog.remove())
    _dialogs.length = 0
  }
}

// @/plugins/vuetify-dialog/vuetify-dialog.d.ts
import Vue from 'vue'
import {VuetifyDialog as VuetifyDialogOrig} from 'vuetify-dialog'

declare module 'vue/types/vue' {
  interface VuetifyDialog extends VuetifyDialogOrig {
    clearAllDialogs: () => void
  }

  interface Vue {
    $dialog: VuetifyDialog
  }
}

// nuxt.config.js
// ...
    plugins: [
      {src: '@/plugins/vuetify-dialog/vuetify-dialog.client.js'},
    ],
 // ...