vuetify - global callable alert and confirm dialogs

MessageAlert.vue

<!--
HOW TO USE
add MessageAlert once anywhere inside your vuetify app. 
On a place where it always get loaded, i.e. before the closing "v-app"
<MessageAlert entrypoint="my_entrypoint"></MessageAlert>

Now you can use it anywhere in your code:
### promise based
    document.my_entrypoint.openAlert({ message:"Thats the text" }).then(() => {
      console.log('Alert closed');
    });

OR
### syncron

    async test() {
      await document.my_entrypoint.openAlert({ title: "Thats the title", message:"thats the text" });
      console.log('Alert closed');
    }

### Parameters 
- title (optional)
- message
- btn_accept (optional)
-->

<template>
  <v-dialog v-model="dialog" class="messageAlertWrap" persistent max-width="400">
    <v-card>
      <v-card-title class="d-block text-center" v-if="title">{{title}}</v-card-title>
      <v-card-text v-html="message" class="text-center"></v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn primary @click="accept">{{btn_accept}}</v-btn>
        <v-spacer></v-spacer>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  props:{
    entrypoint: {//the EntryPoint defines where the functions should be available
      required:true,
      type:String
    }
  },
  data:() => ({
    dialog:false,
    message:"",
    title:"",
    btn_accept: "",
  }),
  mounted() {
    document.addEventListener(this.entrypoint+'_open_message_alert', this.handleOpenEvent, { once:false /* handle listener only once*/ });
    if(document[this.entrypoint]===undefined) document[this.entrypoint] = {};
    document[this.entrypoint].openAlert = this.publicFunction;
  },
  beforeDestroy() {
    document.removeEventListener(this.entrypoint+'_open_message_alert', this.handleCloseEvent);
    document[this.entrypoint].openAlert = undefined;
  },
  methods:{
    reset() {
      this.dialog = false;
      this.message = "";
      this.title = "";
      this.btn_accept = "OK";
    },
    handleOpenEvent(event) {
      console.log('alert',event);
      this.dialog = true;
      this.message = event.detail.message;
      this.title = event.detail.title;
      if(event.detail.btn_accept) this.btn_accept = event.detail.btn_accept;
    },
    accept() {
      var event = new CustomEvent(this.entrypoint+'_message_alert_close', { detail: { 'type': 'accept' }});
      document.dispatchEvent(event);
      this.reset();
    },

    /**
     * This function will be available via document.<your-entrypoint>.openAlert
     */
    publicFunction(data) {
      //send open event to MessageAlert-component 
      document.dispatchEvent(
        new CustomEvent(this.entrypoint+'_open_message_alert', { detail: data })
      );

      return new Promise((resolve) => {//return promise so the caller can wait for it
        //wait for close event from MessageAlert-component
        document.addEventListener(this.entrypoint+'_message_alert_close', (eventData) => {
          console.log('alert close',eventData);
          resolve();
        }, { once: true /* handle listener only once*/ });

      });
    }
  }
}
</script>

MessageConfirm.vue

<!--
HOW TO USE
add MessageConfirm once anywhere inside your vuetify app. 
On a place where it always get loaded, i.e. before the closing "v-app"
<MessageConfirm entrypoint="my_entrypoint"></MessageConfirm>

Now you can use it anywhere in your code:
### promise based
    document.my_entrypoint.openConfirm({ message:"Thats the text" }).then(() => {
      console.log('Alert closed');
    });

OR
### syncron

    async test() {
      let result = await document.my_entrypoint.openConfirm({ title: "Thats the title", message:"thats the text" });
      console.log('Confirm closed',result);
    }

### Parameters
title (optional)
message
btn_accept (optional)
btn_dismiss (optional)
-->
<template>
  <v-dialog v-model="dialog" class="messageConfirmWrap" persistent max-width="400">
    <v-card>
      <v-card-title class="d-block text-center pa-3 pb-0" v-if="title">{{title}}</v-card-title>
      <v-card-text v-html="message" class="pa-3 text-center"></v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn primary text @click="dismiss">{{btn_dismiss}}</v-btn>
        <v-btn primary @click="accept">{{btn_accept}}</v-btn>
        <v-spacer></v-spacer>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props:{
    entrypoint: {
      required:true,
      type:String
    }
  },
  data:() => ({
    dialog:false,
    message:"",
    title:"",
    btn_accept: "",
    btn_dismiss: "",
  }),
  mounted() {
    this.reset();
    document.addEventListener(this.entrypoint+'_open_message_confirm', this.handleOpenEvent, { once:false /* handle listener only once*/ });
    if(document[this.entrypoint]===undefined) document[this.entrypoint] = {};
    document[this.entrypoint].openConfirm = this.publicFunction;
  },
  beforeDestroy() {
    document.removeEventListener(this.entrypoint+'_open_message_confirm', this.handleCloseEvent);
    document[this.entrypoint].openConfirm = undefined;
  },
  methods:{
    reset() {
      this.dialog = false;
      this.message = "";
      this.title = "";
      this.btn_accept = "OK";
      this.btn_dismiss = "Abbrechen";
    },
    handleOpenEvent(event) {
      this.dialog = true;
      this.message = event.detail.message;
      this.title = event.detail.title;
      if(event.detail.btn_accept) this.btn_accept = event.detail.btn_accept;
      if(event.detail.btn_dismiss) this.btn_dismiss = event.detail.btn_dismiss;
    },
    dismiss() {
      /**
       * This function triggers an event on the dom-document.
       * How to listen to:
          document.addEventListener(this.entrypoint+'_message_confirm_close', function(e) {
              console.log(this.entrypoint+'_message_confirm_close', e.detail); // Prints "Example of an event"
          });
      */
      var event = new CustomEvent(this.entrypoint+'_message_confirm_close', { detail: { 'type': 'dismiss' }});
      document.dispatchEvent(event);
      this.reset();
    },
    accept() {
      var event = new CustomEvent(this.entrypoint+'_message_confirm_close',{ detail: { 'type': 'accept' }});
      document.dispatchEvent(event);
      this.reset();
    },


    /**
     * This function will be available via document.<your-entrypoint>.openConfirm
     */
    publicFunction(data) {
      //send open event to MessageConfirm-component 
      document.dispatchEvent(
        new CustomEvent(this.entrypoint+'_open_message_confirm', { detail: data })
      );

      return new Promise((resolve) => {//return promise so the caller can wait for it
        //wait for close event from MessageConfirm-component
        document.addEventListener(this.entrypoint+'_message_confirm_close', (eventData) => {
          console.log('confirm close',eventData);
          if(eventData.detail.type === 'accept') {
            resolve(true);
          } else {
            resolve(false);
          }
        }, { once: true /* handle listener only once*/ });

      });
    }
  }
}
</script>

This components are intended to be added only once in your app, to have a styleable alternative to window.alert and window.confirm.
If you need different styles for different dialogs, you may use the original vuetify dialogs the old fashion way or add additional parameters in the reset and openEvent functions.