Step-by-step guide on creating a plugin that displays a modal popup with Vue. The function call should be executed as a function()

Question

Step-by-step guide on creating a plugin that displays a modal popup with Vue. The function call should be executed as a function()

I've been working on creating a VueJS plugin that will allow me to call a global method, triggering a popup message with an input text field. My goal is to be able to use the following code snippet in any Vue component:

this.$customPopup("Title","Body","Value");

Upon calling this method, a popup should appear on the screen.

I attempted to build it, but encountered an issue where this.$refs was not recognized when called within the install() function:

DeleteConfirmation.vue

<template>
    <b-modal size="lg" ref="deleteConfirmationModal" :title="this.title" header-bg-variant="danger" @ok="confirmDelete" @cancel="confirmCancel">
        <p>
            {{this.body}}
        </p>
    </b-modal>
</template>
<script>
    export default {
        data()
        {
            return {
                title: null,
                body: null,
                valueCheck: null,
                value: null
            };
        },
        install(vue, options)
        {
            Vue.prototype.$deleteConfirmation = function(title, body, expectedValue)
            {
                this.title = title;
                this.body = body;
                this.valueCheck = expectedValue;
                this.$refs.$deleteConfirmation.show()
            }
        },
    }
</script>

app.js

import DeleteConfirmation from './components/global/DeleteConfirmation/DeleteConfirmation';
Vue.use(DeleteConfirmation);

The call I am attempting to make is:

$vm0.$deleteConfirmation("title","body","val");

During runtime, I encounter the following error:

app.js?id=c27b2799e01554aae7e1:33 Uncaught TypeError: Cannot read property 'show' of undefined
    at Vue.$deleteConfirmation (app.js?id=c27b2799e01554aae7e1:33)
    at <anonymous>:1:6
Vue.$deleteConfirmation @ app.js?id=c27b2799e01554aae7e1:33
(anonymous) @ VM1481:1

It seems that this.$refs in DeleteConfirmation.vue is undefined.

javascript vue.js vuejs2

Answer 1

Answer №1

Consider avoiding the use of $ref in Vue (it is intended for third-party and special cases).
$ref is not reactive and is populated after rendering...

My preferred solution is to utilize an event bus like so:

const EventBus = new Vue({
      name: 'EventBus',
});
Vue.set(Vue.prototype, '$bus', EventBus);

Then, use the event bus to call functions on your modal...

(

this.$bus.on('event-name', callback)

/ this.$bus.off('event-name');

this.$bus.$emit('event-name', payload);

)

You can create a wrapper around the bootstrap modal similar to mine (except I use sweet-modal)

<template>
  <div>
    <sweet-modal
      :ref="modalUid"
      :title="title"
      :width="width"
      :class="klass"
      class="modal-form"
      @open="onModalOpen"
      @close="onModalClose"
    >
      <slot />
    </sweet-modal>
  </div>
</template>

<script>
  export default {
    name: 'TModal',
    props: {
      eventId: {
        type: String,
        default: null,
      },
      title: {
        type: String,
        default: null,
      },
      width: {
        type: String,
        default: null,
      },
      klass: {
        type: String,
        default: '',
      },
    },
    computed: {
      modalUid() {
        return `${this._uid}_modal`; // eslint-disable-line no-underscore-dangle
      },
      modalRef() {
        return this.$refs[this.modalUid];
      },
    },
    mounted() {
      if (this.eventId !== null) {
        this.$bus.$on([this.eventName('open'), this.eventName('close')], this.catchModalArguments);
        this.$bus.$on(this.eventName('open'), this.modalRef ? this.modalRef.open : this._.noop);
        this.$bus.$on(this.eventName('close'), this.modalRef ? this.modalRef.close : this._.noop);
      }
    },
    beforeDestroy() {
      if (this.eventId !== null) {
        this.$off([this.eventName('open'), this.eventName('close')]);
      }
    },
    methods: {
      onModalOpen() {
        this.$bus.$emit(this.eventName('opened'), ...this.modalRef.args);
      },
      onModalClose() {
        if (this.modalRef.is_open) {
          this.$bus.$emit(this.eventName('closed'), ...this.modalRef.args);
        }
      },
      eventName(action) {
        return `t-event.t-modal.${this.eventId}.${action}`;
      },
      catchModalArguments(...args) {
        if (this.modalRef) {
          this.modalRef.args = args || [];
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .sweet-modal {
    .sweet-title > h2 {
      line-height: 64px !important;
      margin: 0 !important;
    }
  }
</style>

Answer 2

Consider avoiding the use of $ref in Vue (it is intended for third-party and special cases).
$ref is not reactive and is populated after rendering...

My preferred solution is to utilize an event bus like so:

const EventBus = new Vue({
      name: 'EventBus',
});
Vue.set(Vue.prototype, '$bus', EventBus);

Then, use the event bus to call functions on your modal...

(

this.$bus.on('event-name', callback)

/ this.$bus.off('event-name');

this.$bus.$emit('event-name', payload);

)

You can create a wrapper around the bootstrap modal similar to mine (except I use sweet-modal)

<template>
  <div>
    <sweet-modal
      :ref="modalUid"
      :title="title"
      :width="width"
      :class="klass"
      class="modal-form"
      @open="onModalOpen"
      @close="onModalClose"
    >
      <slot />
    </sweet-modal>
  </div>
</template>

<script>
  export default {
    name: 'TModal',
    props: {
      eventId: {
        type: String,
        default: null,
      },
      title: {
        type: String,
        default: null,
      },
      width: {
        type: String,
        default: null,
      },
      klass: {
        type: String,
        default: '',
      },
    },
    computed: {
      modalUid() {
        return `${this._uid}_modal`; // eslint-disable-line no-underscore-dangle
      },
      modalRef() {
        return this.$refs[this.modalUid];
      },
    },
    mounted() {
      if (this.eventId !== null) {
        this.$bus.$on([this.eventName('open'), this.eventName('close')], this.catchModalArguments);
        this.$bus.$on(this.eventName('open'), this.modalRef ? this.modalRef.open : this._.noop);
        this.$bus.$on(this.eventName('close'), this.modalRef ? this.modalRef.close : this._.noop);
      }
    },
    beforeDestroy() {
      if (this.eventId !== null) {
        this.$off([this.eventName('open'), this.eventName('close')]);
      }
    },
    methods: {
      onModalOpen() {
        this.$bus.$emit(this.eventName('opened'), ...this.modalRef.args);
      },
      onModalClose() {
        if (this.modalRef.is_open) {
          this.$bus.$emit(this.eventName('closed'), ...this.modalRef.args);
        }
      },
      eventName(action) {
        return `t-event.t-modal.${this.eventId}.${action}`;
      },
      catchModalArguments(...args) {
        if (this.modalRef) {
          this.modalRef.args = args || [];
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .sweet-modal {
    .sweet-title > h2 {
      line-height: 64px !important;
      margin: 0 !important;
    }
  }
</style>

Answer 3

Answer №2

CustomModal.vue

<template>
  <div class="custom-modal-wrapper" v-if="isVisible">
    <h2>{{ modalTitle }}</h2>
    <p>{{ modalText }}</p>
    <div class="custom-modal-buttons">
      <button class="modal-button" @click="hideModal"&ellt;Close</button>
      <button class="modal-button" @click="confirmAction"&egt;Confirm</button>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isVisible: false, 
      modalTitle: '',
      modalText: ''
    }
  },
  methods: {
    hideModal() {
      this.isVisible = false;
    },
  }
}
</script>

ModalPlugin.js (plugin)

import CustomModal from 'CustomModal.vue'

const ModalPlugin = {
  install(Vue, options) {
    this.EventBus = new Vue()
    Vue.component('custom-modal', CustomModal)
    Vue.prototype.$customModal = {
      showModal(modalParams) {
        ModalPlugin.EventBus.$emit('showModal', modalParams)
      }
    }
  }
}

export default ModalPlugin

app.js

import ModalPlugin from 'ModalPlugin.js'
// ...
Vue.use(ModalPlugin)

MainApp.vue

<template>
  <div id="main-app">
    // ... 
    <custom-modal/>
  </div>
</template>

Answer 4

CustomModal.vue

<template>
  <div class="custom-modal-wrapper" v-if="isVisible">
    <h2>{{ modalTitle }}</h2>
    <p>{{ modalText }}</p>
    <div class="custom-modal-buttons">
      <button class="modal-button" @click="hideModal"&ellt;Close</button>
      <button class="modal-button" @click="confirmAction"&egt;Confirm</button>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isVisible: false, 
      modalTitle: '',
      modalText: ''
    }
  },
  methods: {
    hideModal() {
      this.isVisible = false;
    },
  }
}
</script>

ModalPlugin.js (plugin)

import CustomModal from 'CustomModal.vue'

const ModalPlugin = {
  install(Vue, options) {
    this.EventBus = new Vue()
    Vue.component('custom-modal', CustomModal)
    Vue.prototype.$customModal = {
      showModal(modalParams) {
        ModalPlugin.EventBus.$emit('showModal', modalParams)
      }
    }
  }
}

export default ModalPlugin

app.js

import ModalPlugin from 'ModalPlugin.js'
// ...
Vue.use(ModalPlugin)

MainApp.vue

<template>
  <div id="main-app">
    // ... 
    <custom-modal/>
  </div>
</template>

Answer 5

Answer №3

It appears quite intricate. Have you considered utilizing a pre-made popup component such as the one found here? https://www.npmjs.com/package/@soldeplata/popper-vue

Answer 6

It appears quite intricate. Have you considered utilizing a pre-made popup component such as the one found here? https://www.npmjs.com/package/@soldeplata/popper-vue

Step-by-step guide on creating a plugin that displays a modal popup with Vue. The function call should be executed as a function()

DeleteConfirmation.vue

app.js

Answer №1

Answer №2

Answer №3

Similar questions

Operating PhantomJS in server mode

The power of VueRouter lies in its ability to leverage metadata

Difficulty arising from the final column of average sums - Information extracted from JSON using Angular JS

"Dropping a file into the Dropzone module will always result in the return of 'empty($_FILES)' being true

When using Typescript in conjunction with Redux Toolkit, you may encounter an issue where the argument specified as type 'T' cannot be assigned to a parameter of type 'WritableDraft<T>'

The D3 path is generating an unexpected output of 0px by 0px, causing the map not to display properly. I am currently unsure how to adjust the projection to

Guide on incorporating vanilla JavaScript into a personalized Vue component

Angular Component Caching

Steps for resending an Ajax request once the previous one has been completed

Tips for displaying just one dropdown when selecting an option in a jQuery menu

What is the significance of having nodejs installed in order to run typescript?

extracting a JSON array from an API

Designing an accordion with the main content peeking out slightly before collapsing into place

Creating a button within an HTML gridview to initiate printing

Adjusting the image placement within a modal window (using bootstrap 3)

Address the scenario where only one of the two AJAX requests was able to successfully complete

Webpack is ejected from watch mode

Working with multiple checkboxes in Vue.js - A detailed guide on filtering data

Is it possible to generate a dynamic multiplication function by utilizing nested attributes together with the selected option in a combobox

Exposing external variables within the setInterval function