title: VueJS activate boostrap modal from Javascript without the use of jQuery
body: <p>I am working on an application using vuejs. When a user logins to my application, i would like to show an error (if any) using bootstrap modal instead of the old fashion alert. Is there a way to &quot;pop&quot; the modal from javascript without the use of jQuery?</p>
  <p>Thank you :)</p>
  <pre><code>$(&quot;#loginerror&quot;).modal();
  </code></pre>
  <p>The code above uses jQuery but I do not want to use that.</p>
  <p>I have tried using the ref method but it shows an error saying
  this.$refs.loginerror.modal is not a function</p>
  <p>Below is my code for the ref method:</p>
  <pre><code>  &lt;!-- Modal --&gt;
    &lt;div ref=&quot;loginerror&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class=&quot;modal-title&quot;&gt;Login Error&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
            &lt;p id = &quot;loginerrormsg&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>snippets of Javascript code</p>
  <pre><code>.catch((error) =&gt; {
      document.getElementById(&quot;loginerrormsg&quot;).innerHTML = error;
      this.$refs.loginerror.modal();
  });
  </code></pre>