BootstrapVue Toast in composition API

ToastExample.vue

<script setup lang="ts">
import { reactive } from "vue";

const toast = reactive({
  message: "",
  options: {
    title: "",
  },
  visible: false,
});

const showToast = (
  message: string = "",
  options: any = { title: "BootstrapVue Toast" }
) => {
  // set message text
  toast.message = message;

  // set options if any
  if (options) {
    toast.options = options;
  }

  // show toast
  toast.visible = true;
};
</script>

<template>
  <div>
    <button @click="showToast('A toast in vue composition API!')">
      Click me
    </button>

    <b-toast :title="toast.options.title" :visible="toast.visible">
      {{ toast.message }}
    </b-toast>
  </div>
</template>