Usando Vuedl para exibir dialogs baseado nos componentes do Vuetify

dialog-plugin.client.js

import Vue from 'vue'
import Vuedl from 'vuedl/src/index'
import NotificationLayout from 'vuedl/src/components/NotificationLayout.vue'
import DialogLayout from '~/components/dialogs/layouts/DialogLayout'
import Notification from '~/components/dialogs/Notification'
import Toast from '~/components/dialogs/Toast'
import ToastLayout from '~/components/dialogs/layouts/ToastLayout'

export default (context, inject) => {
  if (!process.client) {
    return
  }

  const keys = Object.keys(context.app).filter(key =>
    key.startsWith('$') || ['router', 'i18n', 'store', 'vuetify', 'apollo'].includes(key))

  const contextVuedl = Object.assign({}, ...keys.map((prop) => {
    if (context.app[prop]) { return { [prop]: context.app[prop] } }
  }))
  contextVuedl.route = context.route

  Vue.use(Vuedl, {
    context: contextVuedl,
    container: '[data-app=true]'
  })
  const instance = Vue.prototype.$dialog
  instance.layout('default', DialogLayout)
  instance.layout('notification', NotificationLayout)
  instance.layout('snackbar', ToastLayout)

  instance.component('notification', Notification, {
    waitForResult: true
  })

  instance.component('toast', Toast, {
    waitForResult: true
  })

  instance.message = {
    info: (message, options) => instance.toast({ text: message, color: 'info', ...options }),
    error: (message, options) => instance.toast({ text: message, color: 'error', ...options }),
    success: (message, options) => instance.toast({ text: message, color: 'success', ...options }),
    warning: (message, options) => instance.toast({ text: message, color: 'warning', ...options })
  }

  instance.notify = {
    info: async (message, options) => await instance.notification({ text: message, color: 'info', ...options }),
    error: async (message, options) => await instance.notification({ text: message, color: 'error', ...options }),
    success: async (message, options) => await instance.notification({ text: message, color: 'success', ...options }),
    warning: async (message, options) => await instance.notification({ text: message, color: 'warning', ...options })
  }

  if (instance) {
    inject('$dialog', instance)
  }
}

DialogLayout.vue

<template>
  <v-dialog
    ref="vdialog"
    v-model="isActive"
    eager
    content-class="vuedl-layout"
    :fullscreen="fullscreen"
    :max-width="getWidth"
    :persistent="persistent || loading"
    :scrollable="scrollable"
    :transition="transition"
    :hide-overlay="hideOverlay"
    :retain-focus="false"
    @keydown.esc="dismiss"
  >
    <dialog-child
      ref="dialog"
      v-bind="$options.propsData"
    />
  </v-dialog>
</template>

<script>
export default {
  props: {
    fullscreen: Boolean,
    scrollable: Boolean,
    hideOverlay: Boolean,
    transition: {
      type: [String, Boolean],
      default: 'dialog-transition'
    },
    showClose: {
      type: Boolean,
      default: () => true
    }
  },
  methods: {
    _destroy () {
      setTimeout(() => {
        this.$destroy()
      }, 1000)
    }
  }
}
</script>

Notification.vue

<template>
  <v-alert
    style="margin: 0; min-width: 300px"
    :dismissible="dismissible"
    :type="color"
    :outlined="outlined"
    :prominent="prominent"
    :text="flat"
    :border="border"
    :tile="tile"
    :dense="dense"
    @input="$emit('submit')"
  >
    <div class="d-flex align-center">
      <div class="mr-2">
        {{ text }}
      </div>
    </div>
  </v-alert>
</template>
<script>
export default {
  layout: ['notification', { showClose: false }],
  props: {
    color: {
      type: String,
      default: 'info'
    },
    actions: {
      type: [Array, Object],
      default: () => ({})
    },
    text: {
      type: String,
      default: ''
    },
    outlined: Boolean,
    prominent: Boolean,
    dismissible: {
      type: Boolean,
      default: true
    },
    flat: Boolean,
    border: {
      type: String,
      default: null
    },
    tile: Boolean,
    dense: Boolean
  }
}
</script>

Toast.vue

<template>
  <div>
    {{ text }}
  </div>
</template>

<script>
export default {
  layout: 'snackbar',
  props: {
    text: {
      type: String,
      default: null
    }
  }
}
</script>

ToastLayout.vue

<template>
  <v-snackbar
    v-model="isActive"
    :timeout="timeout"
    :color="getColor"
    class="application"
    :top="top"
    :left="left"
    :right="right"
    :bottom="bottom"
    :multi-line="multiLine"
    :vertical="vertical"
    :elevation="elevation"
    :text="flat"
    :centered="centered"
    :rounded="rounded"
    :outlined="outlined"
    :shaped="shaped"
    @click="dismiss"
  >
    <dialog-child
      ref="dialog"
      v-bind="$options.propsData"
    />
  </v-snackbar>
</template>

<script>
import Confirmable from 'vuedl/src/mixins/confirmable'
export default {
  mixins: [Confirmable],
  props: {
    type: {
      type: String,
      default: null
    },
    color: {
      type: String,
      default: null
    },
    timeout: {
      type: Number,
      default: 5000
    },
    position: {
      type: String,
      default: 'top'
    },
    multiLine: Boolean,
    vertical: Boolean,
    elevation: {
      type: [Number, String],
      default: 0
    },
    flat: Boolean,
    centered: Boolean,
    rounded: {
      type: [Boolean, String],
      default: false
    },
    outlined: Boolean,
    shaped: Boolean
  },
  data () {
    const position = this.position || this.$options.propsData.position || ''
    return {
      top: position.includes('top'),
      left: position.includes('left'),
      right: position.includes('right'),
      bottom: position.includes('bottom')
    }
  },
  computed: {
    getColor () {
      return this.color || this.type
    }
  },
  methods: {
    _destroy () {
      setTimeout(() => {
        this.$destroy()
      }, 500)
    }
  }
}
</script>