Vue Example for Bootstrap Modal - Composition API

ModalExample.vue

<template>
  <div>
    <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
    <b-modal ref="myModal" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h3>Hello From My Modal!</h3>
      </div>
      <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
    </b-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  components: {},
  setup() {
    myModal = ref()

    hideModal = () => {
      myModal.value.hide()
    }

    toggleModal = () => {
      myModal.value.show()
    }

    return {
      myModal,
      hideModal,
      toggleModal,
    }
  },
})
</script>