How to make modal popup window in Vuejs? - vue.js

Question

<style src="./LoginButton.scss" lang="scss"></style>
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script>
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<!-- <span v-if="showLoggedIn" class="hidden-xs">
<a #click="logout" data-test="logout-button">
<span>{{ $t("signOut") }}</span>
</a>
</span>-->
<span v-else data-test="login-button">
<router-link :to="{ name: 'login' }">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</router-link>
</span>
</div>
</template>
I have written the above code for login, Where in this particular line
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.
also, I tried bootstarp-vue but I wasn't able to find the solution.

Answer 1

It's easier than what you think and mostly you won't need a special CSS lib for that, so the thing to do is just to make another component and call it whatever you want(but modal.vue makes sense here):
//inside modal.vue:
<template>
<div className="modal__wrapper">
<div className="modal">
<slot/>
</div>
</div>
</template>
<style lang="scss" scoped>
.modal{
width: 300px;
height: 100px;
border-radius: 10px;
background-color: white;
padding: 20px 20px;
z-index: 1200;
&__wrapper{
background-color: rgba(0,0,0,0.4);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
position: absolute;
top: o;
}
}
</style>
in its simplest form, it's just a component with some styling to make it look like a modal (a transparent background(to make it look it's over the previous page) and an absolute position for its wrapper(the transparent one) and some centering techniques for its actual content),I didn't put any script in it(because it's just a simple modal I'm showing you to give the idea how to make yours) and then there is this slot part meaning you can pass your registration form to this modal component, from your parent component and use a boolean flag to just show it on register click
(sure you might need to add some more CSS to the .modal class):
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script> <!-- the cleaner thing would
be to import them in your script section somehow -->
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<span v-else data-test="login-button">
<!-- no need to rerouting to another path -->
<Modal>
<!--your template for registration will go here-->
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</Modal>
</span>
</div>
</template>
//you gotta import the modal component so in your script section you have sth like this(BTW what type of structure are you using for your project? are you using vue-cli's scaffold or what? Are you using babel? cuz I'm gonna assume you are!)
<script>
import Modal from 'The_Relative_Path_to_the_Modal_you_just_created';
export default {
components:{
Modal
},
data(){
return{
showLoggedIn: false
}
}
}
</script>
<style src="./LoginButton.scss" lang="scss"></style>