How to Make a Popup Modal with Vue Transitions | A VueJS Basics Tutorial

Today we learn how to make a VueJS Popup Modal using Vue Transitions to apply animation to our vue components. We dive into the Vue Transition classes and Vue conditional rendering to create a popup modal animates into the DOM.

A Javascript Project

Day 16 #31Days31Videos

// GET INVOLVED!

// JOIN THE DISCORD!!

// FOLLOW ME ON TWITTER!!!

// DO THESE SIMPLE STEPS!!!!
LIKE, SUBSCRIBE & SHARE

// MUSIC
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)

[flolegend]

Thank you so much bro <3 Only youtuber who shares code link even knowing people can skip the video and just use the code.. Such an amazing guy.

[alenanik]

I just found your channel and wow! amazing explanation and I'm not afraid of modals anymore :D

[Webnoob]

There is nothing to add. Very well explained. Subscribed 😂

[ngsuraj]

I have'nt worked on Vue.js yet, but after watching this video I am planning to switch from ReactJS to VueJS.

[milad]

This is really useful thank you so much

[raf]

nice video! gonna put this to use ASAP

[nataliashevcun]

Thank you, Tyler! That was a great video, very clear, and helped me in my project, too!

[octaviusbytes]

For anyone following along using the vue cli "showModal" must be a function in App.vue. So in the script tag it should look something like this:



export default {
name: "App",
data() {
return {
showModal: true
};
},
components: {}
};

[phantam]

So helpfull and clear. Inspire me for css code too, thank you.

[King-xnfs]

How are you this good man. This aint even fair.😥 Nice work tho!!!!

[AdnanErlansyah-nxxp]

Sir how about if I want to trigger the showModal from the parent component? I think it's not triggered the transition because the state has changed before the animation can be triggered.

[jacobmohomutsi]

Hi, Tyler thank you for the great video, I'm pretty new to Vue and this video really helped me out with my project. When I refresh my page the modal automatically pops up I don't understand what may be causing that. Otherwise awesome video!

[abulsyed]

Hey dude, why on the .slide-enter & .slide-leave-to class did you add translateY(-50%) ?

[nishantsethi]

can someone help me, i am not getting modal box. i installed dart-sass and clicking the box does not open.

[rifanaldio]

ka mau nanya, kalo mau tampilin modal di beda file gimana ya

[gamefax]

Anyone get this working on a nuxt page with in line scopes? Doesn't seem to work no matter what I do.

[mrfriz]

Thank you, but you spent my time for styling useless button