EASY Vue 3 POPUP Component ~ Button & Timed Triggers

Learn how to build an easy Popup component with Vue 3 and the composition API. We look into a beginner friendly approach of setting up and building a Vue 3 app that uses a timed and button triggered popup.
Source code: github.com/Tyl...
// Support me on Ko-Fi
ko-fi.com/tyle...
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
www.youtube.co...
// MY GEAR FOR CODING AND UA-cam
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@mubafaw]

Exactly what I was looking for. Straight, eloquent and precise! Many Thanks!

[@TylerPotts]

Thanks for watching! :D

[@Sky_ye]

These styles
display: flex;
align-items: center;
justify-content: center;
don't work fine for now with popups/modals. If content will be too long top will be clipped. Best solution so far are setting top margin to prevent those situations in every browser
in firefox safe align works as solution
justify-content: safe center;
align-items: safe center;
but on other browsers doesnt so far sadly but keep it in mind that future can make modals easy centered without using js to calculate it and caring about content size

[@TylerPotts]

Ah my bad!

[@dennisaarkana5335]

Watching this in 2022 as my entry level learning Vue 3! Nice one!

[@TylerPotts]

Best of luck!

[@serdaraltuntas6551]

Thx for this short and cool tutorial!

[@TylerPotts]

Glad you liked it!

[@Trolpedo]

Hello, can you tell me how you did to create the child template by only typing "vue"? What kind of magis is this? Vue 3 Snippets doesn't do this, so I'm thinking it may be a custom one :) Thanks!

[@SEOng-gs7lj]

Can this be compiled in a JS that can be added to any HTML?

[@Me-fz2ty]

I LOVE YOU TYLER

[@janeilestopa4581]

Thank you so much, you just saved my life.

[@umututkualtn3601]

I have ---Cannot read property 'buttonTrigger' of undefined--- error.

[@bilalmajeed6122]

I get the same error, any solution?

[@ДмитрийДудко-р3в]

how to open popup everywhere vue js ???
(like component in heeader and another place) ????

[@rangabharath4253]

Awesome as always 👍😀

[@TylerPotts]

Thanks again!

[@ms2345y]

Thank you very much, Sir !

[@SusanthCom]

Good presentation ❤️. Thanks 👍

[@TylerPotts]

Glad you liked it!

[@premodsuraweera]

I'm Trying this code, but it is not work, can I have contact with you

[@tiannahl]

Great pacing.

[@TylerPotts]

Many thanks!

[@IanLin-x9m]

Thanks~~~Bravo!

[@Mohammed-rx6ok]

Theme name plz?

[@GergelyCsermely]

Thank You!

[@TylerPotts]

You're very welcome!

[@vietquang1586]

thank you bro

[@umaroov_o]

thank you

[@filozof3972]

King!

[@TylerPotts]

👑

[@NickBrown79]

I hate it when the video doesn't show what you're going to actually create until the end... ugh...

[@mamurolimov]

few js according to captions 😂😂

[@programmerrdai]

First

[@TylerPotts]

WAHEYYY! 😂

[@programmerrdai]

@@TylerPotts :)

[@AaronFisher]

First STOP THE COUNT

[@TylerPotts]

Incredible speed! :O

[@egbertjoel7959]

Nothing for beginners to take away from the video I guess, thanks for nothing

[@bilalmajeed6122]

what a waste of time