title: How to make modal popup window in Vuejs?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;style src="./LoginButton.scss" lang="scss"&gt;&lt;/style&gt;
  &lt;i18n src="./LoginButton.txt"&gt;&lt;/i18n&gt;
  &lt;script src="./LoginButton.js"&gt;&lt;/script&gt;
  
  &lt;template&gt;
    &lt;div class="header-login component-same ml-10"&gt;
      &lt;span v-if="showLoggedIn"&gt;
        &lt;router-link :to="{ name: 'user' }" data-test="login-info-name"&gt;
          &lt;i class="dl-icon-user12"&gt;&lt;/i&gt;
          &lt;span class="target-text hidden-xs hidden-sm"&gt;{{
            $t('myAccount')
          }}&lt;/span&gt;
        &lt;/router-link&gt;
      &lt;/span&gt;
      &lt;!-- &lt;span v-if="showLoggedIn" class="hidden-xs"&gt;
        &lt;a @click="logout" data-test="logout-button"&gt;
          &lt;span&gt;{{ $t("signOut") }}&lt;/span&gt;
        &lt;/a&gt;
      &lt;/span&gt;--&gt;
      &lt;span v-else data-test="login-button"&gt;
        &lt;router-link :to="{ name: 'login' }"&gt;
          &lt;i class="dl-icon-user12"&gt;&lt;/i&gt;
          &lt;span class="target-text hidden-xs hidden-sm"&gt;{{ $t('Register') }}&lt;/span&gt;
        &lt;/router-link&gt;
      &lt;/span&gt;
  
   
    &lt;/div&gt;
    
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have written the above code for login, Where in this particular line</p>
  <p>User has a register button, As soon as the user clicks on the register button, the User will be redirected to another page where he can fill up the basic details, So Instead of redirecting into another page, I want the Register button as a Popup, wherein the popup user can enter details.</p>
  <p>also, I tried bootstarp-vue but I wasn't able to find the solution.</p>