bootstrap vue toast disappears immediately

Question

I'm trying to display a message using toast. So I tried all example code on (https://getbootstrap.com/docs/5.1/components/toasts/) here,
but when I click the button to show up toast, it showed once and disappear immediately.

I tried this.$bvToast.toast to this.$root.$bvToast.toast and import 'bootstrap-vue/dist/bootstrap-vue.css'

but it doesn't work..

here is my code

<template>
 <div>
    <b-button @click="makeToast()">Show Toast</b-button>
    <b-button @click="makeToast(true)">Show Toast (appended)</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toastCount: 0
      }
    },
    methods: {
      makeToast(append = false) {
        this.toastCount++
        this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
          title: 'BootstrapVue Toast',
          autoHideDelay: 5000,
        // 'no-auto-hide':true,
          appendToast: append
        })
      }
    }
  }
</script>

exactly same the example code..

I'm using this version

"vue": "^2.6.14",
"bootstrap-vue": "^2.21.2",

How can I fix this?? Help me..

Answer 1

I tried your code with bootstrap v4 and it works perfectly. I think you are using boostrap v5 but it's not compatible with vue-bootstrap version 2.21.2. So try to downgrade bootstrap version of your project.

Please see this codesandbox.