Could you assist me in solving my issue? I am looking to develop a customized plugin for my project so that my team and I can easily implement an alert component without having to design the dialog box repeatedly on every page and vuejs file.
My objective is to create an alert component plugin where we do not need to initialize the component in our vuejs files. For example, just by calling:
customise_alert.fire({ title: 'Confirmation message'})
.then((result) => {
if(result.value == 1) console.log("option 1 is pressed")
});
I have tried various approaches but this is the closest I have come to achieving my goal.
Note: I am using Laravel with vuejs.
This is what my code looks like 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 very much in advance.