title: Toast not displaying with bootstrap and vue (not bootstrap-vue)
body: <p>I want to toast as notification to my web app with the help of bootstrap 5 and vue 3 and I'm trying to use template code which is given in the bootstrap official documentation but its not working in my code - here is the code</p>
  <p>can some one help me, my goal is 'when I click on the button toast should be displayed'</p>
  <pre><code>export default{
  methods:  {
     toast(){var toastTrigger = document.getElementById('liveToastBtn')
  var toastLiveExample = document.getElementById('liveToast')
  if (toastTrigger) {
    toastTrigger.addEventListener('click', function () {
      var toast = new bootstrap.Toast(toastLiveExample)
  
      toast.show()
    })
  }
    }
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;liveToastBtn&quot; @click=&quot;toast()&quot;&gt;Show live toast&lt;/button&gt;
  
  &lt;div class=&quot;position-fixed bottom-0 end-0 p-3&quot; style=&quot;z-index: 11&quot;&gt;
    &lt;div id=&quot;liveToast&quot; class=&quot;toast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
      &lt;div class=&quot;toast-header&quot;&gt;
        &lt;img src=&quot;&quot; class=&quot;rounded me-2&quot; alt=&quot;&quot;&gt;
        &lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;
        &lt;small&gt;11 mins ago&lt;/small&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;toast-body&quot;&gt;
        Hello, world! This is a toast message.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt; 
  </code></pre>