Append bootstrap-vue modal to app template

Question

I use bootstrap-vue modal:

In my project codesandbox:

Template:

<template>
  <b-button variant="link" class="btn-remove" @click="removeItemFromOrder(index)">
    Remove item
  </b-button>
</template>

Script generating modal with custom content:

<script>
export default {
  name: "HelloWorld",
  methods: {
    removeItemFromOrder: async function (position) {
        let self = this

        const h = this.$createElement

        const titleVNode = h('div', { domProps: { innerHTML: '<h2>Remove this item?</h2>' } })

        const messageVNode = h('div', { class: ['modal-complete'] }, [

          h('div', {
            domProps: {
              innerHTML:  '<h2>Remove this item?</h2>'+
                          '<span class="popup-meta">'+
                            'Are you sure you want to remove this item?'+
                          '</span>'
            }
          })
        ])


        this.$bvModal.msgBoxConfirm([messageVNode], {
          title: [],
          centered: true,
          modalClass: 'success-popup',
          hideHeader:true,
          footerClass: 'd-flex justify-content-center align-items-center',
          cancelVariant: 'outline-danger',
          okVariant: 'danger',
          okTitle: 'YES',
          cancelTitle: 'NO',
          ststic: false
        })
          .then(async function (result) {
            if (result) {
              self.currentOrder.items.splice(position, 1)
              await self.sync()
            }
          })
          .catch(err => {
            // An error occurred
          })
      },
  }
};
</script>

Now bootstrap modal after open append to body. So, that's why I have a quastion:

How I can append bootstrap-vue modal to #app or another template\ tag?

P.S: only for this.$bvModal.msgBoxConfirm with then ... So as not to create unnecessary methods ... due to amount of popups with diffetent logic

Answer 1

It's not posible If you read the code, it just append direct the Modal to the body

https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/helpers/bv-modal.js#L150

  const div = document.createElement('div')
  document.body.appendChild(div)
  msgBox.$mount(div)