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. e.g 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.

is it a possibility to make a new component only for the dialog box and show this component each time the alert is fired? — B0BBY
– B0BBY, Commented Oct 28, 2021 at 6:38
I already tried that approach and return the value the user selected using emit/on but the structure is not ideal because the code is kinda messy and everywhere. I want something simple and easy to apply in our other projects. I am not an expert in vujs but I am pretty sure it's possible and I just don't know what to search online. — Daniel Javier
– Daniel Javier, Commented Oct 28, 2021 at 12:21

tony19 · Accepted Answer · 2022-07-16 01:54:55Z

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>

edited Jul 16, 2022 at 1:54

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 29, 2021 at 8:28

Narges Pms

5502 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related