How to dynamically create an component and return a value programmatically in vuejs

Question

Can you please help me with my problem I want to create a plugin customized for my project so I and my team can easily apply this alert component without designing the dialog box on every page and every vuejs file?

My goal is to create an alert component plugin where we don't have to initialise the component on our vuejs files. eg just calling.

customise_alert.fire({ title: 'Confirmation message'})
.then((result) => {
  if(result.value == 1) console.log("option 1 is pressed")
});

I already tried many different approaches but this is the closest I can get to my goal.

Note: I'm using Laravel with vuejs

This is my code so far: PopUpComponent.vue

<template>
  <div>
    <v-dialog v-model="dialog_confirmation" max-width="400" content-class="c8-page">
      <v-card>
        <v-card-title class="headline">
          <v-icon v-show="icon_show" :color="icon_color">{{ icon }}</v-icon> {{ title }}
          <a href="#" class="dialog-close" @click.prevent="dialog_confirmation = false"><v-icon>mdi-close</v-icon></a>
        </v-card-title>
        <v-card-text>
          <div style="margin:10px;" v-html="message"></div>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" depressed tile small @click="updateValue(1)">Yes</v-btn>
          <v-btn color="primary" depressed tile small @click="updateValue(2)">No</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
export default {
  name: 'Cirrus-Alert-Confirmation',
  props: {
    title: {default: ''},
    message: {default: ''},
    icon_color: {default: 'while'},
    icon: {default: 'warning'},
    icon_show: {default: false}
  },
  data() {
    return {
      dialog_confirmation: false
    }
  },
  mounted() {

  },
  methods: {
    fire: function() {
      this.dialog_confirmation = true;
    },
    updateValue: function(value) {
      this.$emit('input', value);
      this.dialog_confirmation = false;
    }
  },
  watch: {

  },
}
</script>

global.js

import Vue from 'vue'
import PopUpComponent from "../components/elements/PopUpComponent";
Vue.prototype.$filters = Vue.options.filters;
var cirrus_alert = Vue.extend(CirrusPopUpComponent);
Vue.prototype.$alert = cirrus_alert;

main.js

import '../../plugins/global';
import Vue from 'vue'
import FormTemplate from '../../components/modules/Templates/FormTemplate.vue';
new Vue({
    el: '#app',
    SuiVue,
    vuetify,
    store,
    components : {
        'main-template-component' : FormTemplate,
    }
}).$mount('#app')

home.blade.php - short version (w/o the other declarations)

<main-template-component></main-template-component>

FormTemplate.vue (the function which triggers the alert)

let alert = new this.$alert({
   propsData:  { title: 'Sample' }
});
alert.$mount();
alert.fire({ title: 'Confirmation message'})
.then((result) => {
  if(result.value == 1) console.log("option 1 is pressed")
});

Thank you heaps in advance.

Answer 1

I think vue mixins could help you through this problem. As it's docs represents :

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component's own options.

You could create a mixin folder and inside it, you could have your reusable files like this alert and just import it wherever you want to use it like below :

<script>
import alert from '../../mixins/alert'

export default {
  name: 'Component1',
  mixins:[alert],
</script>