[Vuejs]-Multiple of the same component spawning the same modal on the same page?

I know this is a bit old, but I stumbled upon the question while fiddling around with Bootstrap Vue’s Modals and thought I’d add in an alternate solution.

BvModal identifies templates by id, and when the show function is called, it will display ALL matching templates tagged with that ID. So knowing that, all we have to do is make the IDs unique!

A sneaky way of doing this is to utilise the uid that Vue assigns to it’s components:

<template>    
<div>
    <button @click="$bvModal.show(`edit-profile-modal-${_uid}`)" class="btn btn-sm btn-secondary mt-3">Edit</button>

    <b-modal :id="`edit-profile-modal-${_uid}`" ref="editProfileModal" :ok-only="true">
        <template #modal-title>
            Edit your profile
        </template>
        <div class="d-block text-center">
            
        </div>
    </b-modal>
</div>

Note that we’re using template literals for both the $bvModal.show function and the id prop of the b-modal. You could just as easily use "'edit-profile-modal-' + _uid" if that looks nicer to you.

This will let you have any number of the same component on the page, without BvModal getting confused as to which modal belongs to which component and without having to create a custom component.

The modal must be in its own component, or it will inevitably be duplicated every time you write it in the template. Create a component for the modal which you can import just once into App.vue. You can toggle it with a Vuex state.

Modal.vue

<b-modal>
...
</b-modal>

App.vue

<template>
  <div>
    ...
    <Modal v-show="showModal" />
  </div>
</template>

computed: {
  showModal() {
    return this.$store.state.showModal;
  }
}

store.js

state: {
  showModal: false
},
mutations: {
  toggleModal(state, isShown) {
    state.showModal = isShown;
  }
}

Now from any component you can use the mutation to show the modal:

methods: {
  showModal() {
    this.$store.commit('toggleModal', true);
  }
}