Promise based dialogue vue js?

Question

I have created a plugin but I don't know how to create a promise based. Can you tell me what I need to add to my existing code?

I use vuetify js for material style

NotifyDlg.vue: This contains the dialogue code for alert or confirm dialogue. Based on message type I will show/hide the button

<template>
  <v-dialog max-width="500px"
            v-model='dialogue'>
    <v-card>
      <v-card-title primary-title>
        <v-icon :color="messageType">{‌{messageType}}</v-icon>
        <title>{‌{title}}</title>
      </v-card-title>
      <v-card-text>{‌{message}}</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn :color="messageType"
               flat
               v-if="confirmDlg"
               @click="value=true">Yes</v-btn>
        <v-btn :color="confirmDlg?'':'primary'"
               flat
               @click="value=false">{‌{getBtnText()}}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  props: {
    confirmDlg: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '',
      required: true
    },
    message: {
      type: String,
      default: '',
      required: true
    },
    messageType: {
      type: String,
      default: 'warning',
      required: true
    }
  },
  data () {
    return {
      value: false,
      dialogue:false
    }
  },
  methods: {
    getBtnText () {
      if (this.confirmDlg) return 'No'
      return 'Ok'
    }
  }
}
</script>

NotifyDlgPlugin.js: Plugin install code. This method will then called in main.js using Vue.Use method.

import NotifyDlg from './NotifyDlg.vue'

export default {
  install: (Vue, options) => {
    Vue.prototype.$notifyDlg = {
      show (message, title, messageType, options = {}) {
        options.message = message
        options.title = title
        options.messageType = messageType
      }
    }
  }
}

from the documentation I got understanding of only global functions that can be called in install method. But I dont understand how can I call the dialogue I have created or how to return the true or false values to called method.

Any suggestion for my problem?

Answer 1

I just released a small library that makes it easy to use promises to deal with dialogs in Vue 3 : https://github.com/rlemaigre/vue3-promise-dialog . People landing on this page from Google might find it useful :-)