EASY Vue 3 POPUP Component ~ Button & Timed Triggers

what is going on fellow developers my name is tyler potts and in today's video we'll be creating our few js pop-up components so this component will allow us to pop up a pop-up however we want to so we can trigger it by clicking a button we can trigger it by a timer we can trigger it by an event we can trigger it by however we want it is that simple and you can create multiple of them really easily so let me show you how this works so we've got a few example pop-ups example here um and if i click open pop-up you can see it opens this pop-up we have a simple pop-up you can put whatever content you want in here as well it's all interchangeable and updatable the pop-up can look however you want now we can hit close pop-up which is cool but also if we refresh the page after three seconds time has passed you'll see a timed pop-up has now uh popped up and we get it here currently this pop-up just fits to the content we have inside of it so that's why the bottom one is a lot bigger but you can again style this however you want so without further ado let's get started okay guys so i'm just in a directory um on the terminal and i'm just gonna run a few create and i'm just gonna call this a few pop-ups hyphen youtube now hit enter and it's going to ask us a few questions on how we want to set up our app so we're going to select manually select features we're going to use css preprocessors and hit enter that's the only one we want we also want to use a version free um or node few free sorry not node three uh sas with node sas uh yes lin and i'm just gonna click the rest of these as uh default now this is gonna run it's gonna create a boilerplate and i will see you once that has completed okay guys now that is finished we're going to cd into a few pop-ups youtube and then once we're in this directory we're going to say uh mpm or we're going to do code dot you can open this up in any uh text editor you want i'm going to be using visual studio code and then and and i'm just going to say mpm run surf hit enter and that is going to open up our view directory or a few up in fierce code and it's also going to start our surface so if we refresh the right side you'll see it's now a welcome to your few js application okay guys so we have this um source folder here we don't need the hello world component we don't need this whole assets folder and we don't need any of the stuff inside of main here so let's just close that we don't need any of this for now let's just remove it we'll add it all in when we need it um and we're going to leave this as default uh just a little bit of styling now just so we don't have to mess around with too much styling i'm also going to select everything i'm going to convert indentations to tabs and now i'm just going to tab using four just because i think it looks a little nicer it's easier to read in in my opinion i'm just gonna create a main here and i have a h1 which says um few pop-ups like that there you go we have a few popups title i'm then going to create a button and inside a button we're just going to say open pop-up and there you go so we've got our boiler plate set out we now need a pop-up component so in under component to create a new file i'm just going to call this pop-up dot view and i'm just going to run the few here to create this little boilerplate thing here now what i'm gonna do i'm also gonna oh it's already tabs for my bed um in here we're gonna create a diff which says stop pop-ups and they're all pop-up not pop-ups that won't make sense uh dot pop-up which we're then going to add inside for a pop-up inner so we're just gonna do dot pop-up hyphen in uh we're then gonna say slot now what slot here this allows us so any content we write in between our tags so normally a component is for example pop up and then you close it there and then it's just a one tag it doesn't need a closing tag but in this case we're going to have it so it is a closing tag so inside of this we could say something such as h2 my pop-up and that will basically um anything we put here so this pop-up anything in between these tags will appear where this slot is and then underneath this we're just gonna have another button it's gonna have the class of pop-up close and we're just gonna say close pop-up i'm just gonna break this down so it's easier to read there you go let's um we don't actually need this sidebar open anymore so we can zoom in a little bit to the code and there we go so we've got this hit save that's not gonna do anything let's go in here let's import pop-up from we can do dot slash components forward slash pop-up now we're going to do an export default and in here we're going to create a setup and we're just going to return pop-up hit save and there you go my pop-up now appears here underneath the few pop-ups so we've got the standard open pop-up and then our actual pop-up here so let's go into our pop-up and let's style it so inside here we're just going to say lang equal sas and then we're going to scope this to this component so this css will only have a match the component we're going to say dot pop-up and inside a pop-up we're just going to give it a um well we'll just gonna give it a position off fixed a top um zero left zero a right of zero and a bottom of zero a c index a ninety and a background color off rgba 0 0 0 0.2 save and there you go now we're going to go in our pop-up inner and well actually first we're just going to display um flex and we're going to align item center we're then going to justify content center uh let's spray it up so it looks different and then here would you give this a background off white we also need it to be position relative actually we don't one more but a background of white with a padding of about say 32 pixels and there you go we've got our pop-up so we've got our pop-up styled it's just a simple one again you can style this pop-up however you like for now i'm just going to keep it simple just because we're not doing a styling we're doing a functionality tutorial i just closed it pop-up let me reopen that there we go so now back in our app we need to actually come up with a way to toggle these now the way i like to toggle them is by using fee if it's obviously what um few is supposed to use but to do that we need some sort of boolean um and to create a reactive boolean we need to import ref and we're going to import that from few so this part of the composition api um and then inside of our setup we're just going to say const pop-up triggers we could just call this triggers but i'm going to do it as pop-up triggers um and then all we need to do is give these a name so we could say the button trigger is equal to false and we can also have our timed trigger equal to false so these are now our trigger so now we need to pass these inside of here and we could say for this first one fee if popup triggers dot button trigger so if that is equal to true so let's set this one to true quickly you'll see our popup appears if it's equal to false it won't appear and there you go so that's how we show so we can call this my button pop-up and let's create a second one which we're going to put underneath let's move that down and this will be the timed trigger so this is going to be my time to pop up we can give these some text just say lauren there you go so let's turn on the timed text and set that to true and there you go we've got a little timed pop-up there so let's change that back to false now how we're going to do this is we're going to create a function that's to toggle the pop-up so here we're going to say const toggle pop-up is equal to the trigger and it's going to be an arrow function which just says uh pop-up triggers dot value because obviously we can't just get this straight we need to use the value and then we need to say the trigger so we can pass through the trigger here and saturday equal to not this so it's literally that it's the only functionality we actually need so we need to actually um pass this through and there you go so what we're doing is we've got this toggle popup function that all it does is changes these from true to false and false to true so let's copy the toggle function let's go up to our pop-ups and let's say well on our button for stars let's just say on or at click is equal to an arrow function that calls toggle pop-up and then it will also take the name of the pop-up trigger so this one will be button trigger hit save now if we hit open popup you can see our pop-up opens but we can't close it we need some way to close it so let's actually pass through our toggle pop-up function let's create a close pop-up function or we could just call this toggle pop-up because it is a toggle pop-up toggle pop up set this equal to another arrow function so it's going to be the exact same as what we did up here so we could literally copy this and paste that there and there you go so if i just break this down quickly including this there you go you can see it literally is as simple as that so now inside of our pop-up up here we can actually in exports we can get our props and set that equal to toggle pop-up and then we can take this and on our button call at click is equal to toggle pop-up and that is all we need to do so now if we click close you can see it close open and close and that is as easy as it is so let's just move this center full screen there so as we click it you can see our pop-up now works let's put this back to its original size and move that over now what we're going to do is we're going to set the timed pop-up so let's go to our app view so we've got our popped a pop-up trigger but how do we trigger the timed one we also need to pass this function on this timed one as well so we're just going to call this timed uh trigger um we could just call it timed um but i feel like time trigger works um but here you go so we've got our button and our um but down inside of our setup we just need to set timeout call an arrow function that just goes in here and we can just say pop-up triggers dot timed or value dot timed trigger is equal to true and after three thousand which three thousand milliseconds is equal to a second if we refresh and we wait one two three and there you go you can see it's now popped up we can close it and that will never appear again because that is timed a timed trigger unless we refresh the page in which case the time trigger will then trigger again and there you go you've got your time pop up we can close down and we can open up our normal pop-up there you go so it's as simple as that guys i hope you've learned something new here using fujs even if that's just saying symbols such as the slot command or even how you will trigger or go about building a pop-up anyway guys thank you for watching this video if you liked it don't forget to leave a thumbs up smash that subscribe button and don't forget to leave a comment if you have any questions now guys you can support the channel if you want to see more of this sort of thing by going to the description below and clicking on the cofi link and either following or donating a small price of a coffee which will help me buy more gear more stuff and even put more time into my videos but anyway guys thank you for watching this video and peace out you

Channel: Tyler Potts

Views: 30,157

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: HorXomQrOi8

Length: 13min 0sec (780 seconds)

Published: Wed Jan 13 2021

Reddit Comments

[u/zmcnulty980]

Nice. Appreciate the video.

A couple of questions unrelated to popups...

Why call TogglePopup as an arrow function with your event listeners? Couldn’t you just write the name of the function?

Also what’s the import ref business about??