Build a Reusable Modal Component Using Vue 3, The Composition API & Slots

all right what's going on everyone in this video we're going to be making a view three modal components so if i go ahead and click on our button right here on our screen currently of open modal this will go ahead and populate what we're going to be building here inside of this video now to construct this modal component we're going to be using the composition api we're going to be using slots and props as well as the enter and leave transitions that view goes ahead and provides us to make our modal animate in and out very smoothly so if i click on the button right here to close it you'll see that it exit our screen very smoothly and if i go ahead and open it back up you'll see that it also enters very smoothly here so that's we're going to be building here today so let's go ahead and get started now really quick before we jump into the video here if you want to support the channel and the free content that i am making here on youtube you now have the ability to join my channel so you're gonna see this button here called join on the actual channel home page now when you click on this it's going to populate a modal here which is going to allow you to join my channel for 2.99 a month now not only are you supporting me and the free content that i'm making here on youtube but you're also going to get loyalty badges next to your name whenever you leave a comment on one of my videos now in addition to this you're also going to get credited inside of my video outro and video descriptions now for this project we are going to be utilizing the view cli to create our view application here now to utilize this first off what you need to have is node.js installed on your system now you may already have it installed and don't know it now to check what you can do is if you're on mac open up a terminal if you're on windows open up a command prompt and run the command node dash v here and if you get return to version here that means you have node installed on your system and that you're going to be all set to actually utilize and install the vue cli on your system now if you don't then click on one of these options right here and go through the installation steps and install node onto your system all right now the second thing that you need to have is actually the view cli itself so if you don't have it all you need to do is come over here to the documentation i'll go ahead and have a link down below in the description and you want to run this command right here of npm install dash g at view cli and that will go ahead and install the ucli onto your system so you can go ahead and create a view application and follow along with me now once again if you don't know if you already have this installed all you need to do is come over to your terminal or command prompt and run the command view hyphen hyphen or dash dash and we'll say version here and you can see that if you do have it installed you'll get return this value right here at ucli and the current version that you have on your system now assuming you have all that installed we're now ready to get started here so inside of vs code i have a empty folder called view 3 modal now the first thing you want to go ahead and do is use the view cli to create our view project here so what i'm going to do is come up to my terminal tab here and select a new terminal and we're going to go ahead and run the command to create our view project using the view cli so how we can do this is by saying view create and pass the name of the project that we want to go ahead and create now since i'm already inside of the view 3 modal folder i'm going to go ahead and call this project app here and this is going to open up the interface here inside of our terminal which is going to allow us to pick a preset or we can manually select our features here so for the sake of this video what i'm going to do is go ahead all the way to the bottom and do manually select features here and go ahead and select enter now we want to go ahead and pick some of the features that we want for this specific project and what we're going to need is the router which i'm going to go ahead and select over uh go over and hit space and also a css preprocessor which i'll let space over that as well and we can go ahead and enter on here now it's going to ask us which version of ujs we want to start the project with we'll go ahead and select three we're going to be using the history mode for our router so we'll select yes here and then for our pre-process here we'll go ahead and use node sas and then we'll go ahead and leave all the rest of the options here as default so we'll do that for our linter we'll do lint on save and for the config files we'll go ahead and store these inside of a dedicated config file and we do have the option to save this preset for future projects but for the sake of this video i'm just going to go ahead and select no and that's going to go ahead and start to create our view application here so some time has passed and we have now successfully created our view application here we can see this if we head over to our app folder here inside of our view 3 folder and we expand this and we're going to see all these files that were generated by the vucli now the first thing we want to go ahead and do is actually change directories into this folder of apps so we're going to say cd and do app here now next up what we want to do is spin up our local development server which is going to serve our view application inside of our browser so we can do this by running the command npm run serve like this and it's going to start up the local development server and we should be served some urls right here so you can see our app is running on our local host of 8081. now this may differ depending on if you have other things running on your local host which i do so we'll go ahead and open this up inside of our browser and you can see here this is the default configuration or i should say template that view generates when you create or use the of ucli now we don't need all this stuff that we currently have inside of our project so let's go ahead and do some cleanup here now here inside of our app folder let's navigate into our src folder which is where we want to do our cleanup ads so inside of this folder let's start inside of our views folder here now we have this about view and we have this home view now for this project and tutorial we're only going to be utilizing our home view here so we don't need our about view so let's go ahead and open this up and we're going to delete it okay now this view is also imported inside of a router so we need to go ahead and remove it from here as well so inside of the router folder we have an index.js and we have this path right here of about which is importing the component so we also want to remove this as well now what we also want to do is inside of our home view itself we have this image and we have this component of hello world which we don't need so i'm going to go ahead and remove this from here now we also need to remove the import statement here inside of our script tag and also the hello world inside of our component option here so let's go ahead and remove that now as for the hello world component itself which is found inside of the components folder here we don't have any need for this so let's go ahead and open this up and we're going to remove it like that we'll just go ahead and delete it now inside of our assets folder here we have that logo.png that was imported into the hello world component or it might have been the home view here so we're no longer using this so there's no need to have it inside of this repository or our project here so let's go ahead and delete this and then the last thing we need to do is inside of our app.view here we have this navigation so if we head back over to our browser you can see we have this navigation left over which we don't need so all we're going to do is remove this div with the id of nav and that'll go ahead and remove that from here as well okay now while we're inside of the app what i want to do here is we have this styling so i'm going to go ahead and remove this and then i'm going to do a simple reset here on our entire project and we're going to say margin 0 and we're going to say padding set that to zero and we're gonna do box sizing and we'll do border box here okay so now if we head back over to our application and our browser here this is gonna give us a fresh clean slate to begin working on our modal component now for our modal component we are going to be using the font awesome library as well as a google font to make things look a little bit better for this tutorial here so let's go ahead and head over to our browser and start off with importing our google font here into our project so i've already selected the font here we're going to be using called carla and i've already selected the option of the import directive here so all we need to do is copy this within the style tags right here and we need to paste this inside of our app.view and within our style tags here now we also need to specify the font family so let's go ahead and copy this right below the import directive here and we'll paste this inside of a reset here okay so now we have successfully went ahead and imported our google font into our application here so the next thing that we want to do is import the font awesome libraries so i'm going to head over to cdnjs.com and you can search up for font awesome here in the search bar and we're going to use this first option right here for our font awesome library so i'm going to copy this link tag here now to use this we need to head over to our public folder or to import we got to head over to our public folder and we need to select the index.html now just above our title here i'm going to go ahead and do a line break and we're going to copy and paste in this link tag here which is going to give us the ability to have and have access to the font awesome library inside of our view project now with that out of the way let's go ahead and actually create our modal component itself here so inside of our components folder right here what we're going to do is we're going to right click on it and do a new file and we'll say modal w here okay so let's start off by generating our view template here i'm going to do this with view and i'm going to do tab that's going to create this view template here now for this component we are going to be accepting one prop which is going to be the modal active prop which is going to control whether or not our modal is visible or it isn't so we'll define props here and we'll go ahead and say modal active here now the reason why i wanted to create this initially before we start any of our markup is because we are going to be utilizing this prop inside of our markup itself so it makes sense to create this before we get started so let's go ahead and first off create our markup here so what i want to do is we're going to wrap our entire modal component here in a transition tag okay so we'll say oops let's try it doesn't like when i do this so we'll say transition here and we'll give it a name here and we'll say modal animation and let's go ahead and close this up and we'll say slash transition here now inside of this transition tag what we're going to do is we're going to have another div which is going to have the class of modal here okay now we only want to show this if let's see here we'll say v show if the prop of modal active is true here okay now inside of this we're going to also have another transition tag because we want to have two separate transitions here because the way we're going to animate this is going to be on the initial actual modal itself and we're also going to need to do a transition or an animation on the modal content or the modal inner we're going to call that so we'll do one more transition tag here we'll say transition we'll do name and this is going to be modal animation and we'll say enter okay and then we'll say we'll close that up now inside of here what we're going to do is we're going to have another div which is going to have the class of modal enter and we're also going to do a v show of the same prop here of modal active like this okay now inside of here we're going to use our font awesome icon so if we head back over to our browser here i already have this pulled up here we're going to be using the icon of this time circle now this is available with the free version but if you have a paid version of font awesome feel free to use whatever clothes icon you want or any kind of icon you want but for this tutorial i'm going to go ahead and use this free icon right here so i'll go ahead and copy this and we'll go ahead and paste this here inside of the modal inner now to make this model dynamic and allow you know you to enter any content you want into this modal we're going to be using what they call a slot here okay so we'll say slot like that now we'll go ahead and go over this more once we actually import this component into our actual home view here but for now this is where we'll go ahead and do a comment here we're going to say this is the modal content like that okay now in addition to this i also want to have an actual close button on our modal here so that we only don't have the close in the top right hand corner we'll also have a button within our modal that's going to allow us to close the modal too so we're going to have two different spots that we can actually exit our modal here so let's go ahead and create our button here and we'll go ahead and just pass the value of close in here and sorry i just hit the mic here so that's going to go ahead and do it for our markup now before we go ahead and get into the styling here i want to first import this component into our home view so first off let's start by importing our modal component here into our home view so inside of our script tag here we'll say import and then we'll say modal and from and then we'll assign the path of where this modal is located so we're going to go into our components folder here and then we'll say modal now we can also get rid of the dot dot here and just assign the at sign which looks a little bit cleaner in my opinion and that'll be the same thing as assigning a dot dot okay now inside of our components property here we also need to say modal like this and now we'll have access to use this inside of our markup here okay so let's go ahead and open up our modal tags here now like i mentioned before we are using slots so we're going to have an opening modal tag here and also a closing modal tag all right so inside of here what i'm going to do is we're going to have a div with the class of modal content now this is a demo for the modal so all i'm going to do is have an h1 here we'll say this is a modal header and then we'll have a paragraph tag here and say this is a uh we'll do yeah modal message like this now since we are using slots you could go ahead and enter anything you want into this in between these modal tags but for the sake of this video i'm going to keep it simple and we're going to have an h1 and just a paragraph tag here okay now currently if we go back to our modal component here you'll see that we're only going to show this if the prop of modal active is true and we are not assigning a property or a prop here on our modal component just yet so let's go ahead and create that so just below our components property here let's go ahead and open up our setup option here okay now inside here we need to create our data so i'm going to go ahead and create a new data value here and we're going to call this modal active and we'll set this equal to a ref here and initially we'll say this is true because i want to show this so we can see what we're doing here okay now to use ref inside of the setup option here we need to import it up top right below our mobile component so our our modal component so let's say import and we'll do our curly brackets here ref and then we'll say from and then we'll do view and now we'll have access to use this inside of our setup option here now to use the modal active data value we need to return it so we'll say return and then we'll say modal active like this and then all we need to do is bind that data value here as a prop to our modal components so how that's going to look is we'll do the shorthand version here we'll say colon and we'll do modal active like this and then we'll say modal uh active okay so now if we head back over to our browser here we should see that we're gonna have our modal markup right here okay so currently we have no way to open and close our modal it is open by default initially but if you wanted to close you can see here if you click on the x button here or the close button nothing is going to happen so what we need to do is create a function that's going to update our data value of modal active from true to false and vice versa from false to true okay so let's head over to our home view here and create that function so just below modal act if here i'll go ahead and create a new function called cons toggle modal and set this equal to a arrow function here now what we want to do is we want to update this value from true to false or from false to true so an easy way to do this we can say modal active now to get the value of this data we need to specify a modal active value here and we want to set this equal to the opposite of whatever it is so we'll say exclamation point modal active dot value so what this function is going to do is if this is true then it'll set it to false whenever we run this function and if it is false what it'll do is set it to true so it's like a nice toggler between true and false okay now to use this inside of our markup we need to return it here so we'll say toggle modal now we have no way initially on our home view here to open our modal so just below our modal component here i'm going to create a new button and we'll say type button and then we'll have the content say open modal okay now what we want to do here is we want to pass a click event here and every time a user clicks this we want to run the function of toggle modal okay so now if we head over to actually first off let's put this to false here so it's not open by default so now if we head back over to our browser we should see that we no longer have our modal open we only have this button here which looks really ugly we'll go ahead and style this in just a minute but now if i click on this you'll see that it's going to populate and open our modal now the problem still exists if you want to close our model here we click on the close button or the close icon nothing is going to happen so what we need to do is we need to listen for user to click on either of these two buttons and then we want to run our toggle modal function so we're going to do this using a emit okay so back inside of our project here inside of our modal component let's first go ahead and define our setup option here okay now if we're using the options api to go ahead and run a custom e event all we'd have to do is say this dot money sign emit and then we could define the event that we wanted to emit from this component now when we're using the composition api we just don't have access to this right here so there's a little bit of a different way we have to do it now the setup option excel itself accepts two parameters the first one is props and the second one is context here okay but we don't need to import the entire context parameter i want to destructure this and only accept the emit okay so that's how we're going to go ahead and emit out of our modal component using the composition api okay so what we want to do is you want to create a function that's going to run our emit every time we click on the close button here or our icon okay so we'll go ahead and create our function of const and we'll say close and set this equal to an arrow function here and then we're going to say emit here and then the event that we want to emit is going to be close okay and then to use this actual function inside of our markup we need to return it so we'll say return and then we'll say close oops and close there we go now here inside of a market what we'll do is we'll say at click we'll run close and the same thing here on our button we'll say close and we'll also put a type of button on here as well okay so now here on our modal component we want to listen for this event so we'll say at close and we'll run our function of toggle modal so now we should be able to open and close our modal successfully here so let's go over to our browser and test this out so currently our model is closed so if we click on open mode we should be able to open it and if we click on close you'll see that it's going to close and if we open it again and click on the icon up here it'll also go ahead and close so currently our modal component looks a little bit rough so let's go ahead and fix that by adding some styling to our actual component here so we'll start off here inside of our home.view and we need to actually create our style tags here so look for the scss scoped and then we'll go ahead and do or select our home class here and we're first going to give this a background color here and we'll go ahead and say rgba and we'll say 0 176. 234 and then we'll pass a 50 opacity here then what we want to do is give this a height of 100 vh we're going to display this as flex now we want to align all the content to the middle of the screen so how we can do that is by saying justify content to the center here and then align items to the center as well okay now we're going to be using or we have this button right here we also have the button inside of our modal component here now what i want to do to save some styling here is i want to apply our button styling globally here so we're going to do that inside of our actual app.view here so i'll come over here we'll say button we're going to give it a padding value of 20 pixels and then we'll say 30 pixels and then what we also want to do is we want to pass the border value and we're going to set that to none we're going to give it a font size here of 16 pixels and we're going to give it a background color and we're going to say crimson here and then what we want to do is you want to make the text color we're going to set that to white and then we're also going to say a cursor of pointer here okay so with that defined if we head back over to our browser now you'll see that our button looks a lot better and if we open it you'll see that the button here inside of a mobile component also is the same okay so what i want to do next is head back over to our home view and then what we need to do is actually style up our modal content here okay so inside of this home selector we'll say modal and we'll say content here and then we're going to set this to display flex and we want this to be in a column so we'll say flex direction here and we'll set this to column like that okay and then we'll do inside of here we'll do some shared styling so we have our h1 and our paragraph tag here and what i want to do is provide a margin bottom of 16 pixels on both of these here and then i want to target our h1 here and we're going to give this a font size and we'll say 32 pixels and then all i want to do for our paragraph here let's scroll down is i want to give it a little bit of a larger size as well and we'll say font size and we'll do 18 pixels here okay so if we head back over to our modal thing should start to be looking a little bit better but we still have some work to do okay so that's going to come on our modal component itself here so let's head over to our modal component here and we already have our style tags defined but what i'll do here is i'll just remove those and we'll replace those with the scoped style tags here okay so what we want to do is we want to target our first class here of modal itself so we'll say dot modal here oops let's say dot modal and then what we want to do is you want to display this as flex we're going to justify the content to the center and we're also going to align the items to the center as well okay now what we also want to do is i want to provide this a height of 100 vh and we'll do a width of 100 vw okay and then we also want to position our modal fixed so we'll say position let's see position here and we'll provide the value of fixed here and then we're going to say top 0 oops top 0 and then we'll say left 0 and then we also want to give this a background color here and we're going to do let's see white like this but i'm also going to provide a opacity so we're going to say rgba and then we'll pass it a fourth value here and we'll say 0.7 like that okay and i believe that's all we need to do for the modal itself okay now inside of our modal we also have the modal inner here so let's go ahead and do some styling to that okay so go ahead and define modal enter here and then what we want to do is you want to position this relative then we're going to give this a max width and we're going to say 640 pixels but we also want to define it to take up 80 percent of the width if it is smaller than 640 pixels if that makes sense we just don't want to any larger than 640 pixels probably a better way to go ahead and say that and we're also going to have a box shadow on here which i'm going to copy and paste in here to save some time it's a little bit lengthy okay we'll scroll back over here and then what we want to also do is give us a background color of white and then we're going to give it a padding or on all sides 64 pixels and then 16 pixels like that okay now what we also want to do is we have our icon here so i want to go ahead and do some styling to our icon so what we want to do is we'll go ahead and target let's see here our i class and we're going to say position absolute and we want to position this in the top right hand corner so i'm going to say top we'll do 15 from the top and then from the right we'll do 15 as well okay and then we're going to give us a font size here of 20 pixels and then we're going to do cursor and we'll do pointer like that and then let's go over and we'll say on the hover here so we can do that by saying and colon hover we'll give this a color and we'll say crimson oops crimson there we go and that should go ahead and do it for our styling so if we head back over to our actual browser and component we're getting a air here and that's because we forgot to define rgb a like that so let's go ahead and fix that so now if we open our modal things should look a lot better and if we hover over our icon here we can close it open it close it so that is looking a lot better now the one problem is you can see here that when we close our modal it's very abrupt now we're going to be using the view transitions of enter and leave to go ahead and animate our modal in and out a lot more smoother now really quick i want to make one slight adjustment here so for the sake of this video it made sense to apply our button styling here globally because we are using it inside of our home top view as well as our modal dot view okay but for the sake of making this component reusable and very easy to implement we have too many moving parts such as this button styling being outside of the scope of our modal component now to make things compact and make this modal component very easy to implement and use without any issues we should actually have this button styling included within our modal component itself so i'm going to copy this and we're going to paste this inside of our modal.enter here right below our i tag here now earlier on when we created our modal component itself we wrapped it in these transition tags which are going to use to animate our modal in and out of the view now whenever our modal comes in and comes out vue is going to apply classes to it that we can use to animate our model in and out of the views so let's go ahead and start off with our first animation here which is going to be for our whole entire modal itself and then we're also going to apply some animations that are going to be a little bit different to the content or the modal content itself so let's go ahead and copy our name here of modal animation and come down to our styling here and let's go ahead and target a few of the classes vue gives us to go ahead and animate this so the first two that i want to target are going to be the active classes which are going to define the actual transition that we want to define on our modal so we're going to target enter active and then we'll also target the leave active here so i'll go ahead and replace enter with leave okay now let's go ahead and put that e back now inside of here what we want to do is you want to define the transition here so let's say transition and we want to only transition the opacity here we want it to happen over 0.3 seconds and for the easy we're going to use a custom cubic bezel option here which we're going to pass a value of 0.52 0.02 0.19 and then 1.02 here okay and that's going to be our transition now we're going to be transitioning the opacity here so what i want to do is we're going to target well let's go and paste this in modal animation here enter from now we want this to enter from an opacity of zero so we'll pass the opacity here and set it to zero now by default the opacity will be one so we could explicitly go ahead and define if i copy this like this we could say enter 2 here and change this to an opacity of 1 but this is already going to be the default option so we don't need to explicitly define this okay now when the modal is leaving we want it to leave to the opacity of zero so the same thing is going to apply here so we could say leave two or sorry leave from here so we wanted to start at one and then we wanted to go to let's see here let's go down here we could say leave two and we could set this to zero but once again by default the opacity is already at one so we don't need to define that so we can go ahead and remove this right here now since these two share the same opacity value we can go ahead and combine these to make our style a little bit more condensed here so let's go ahead and remove that and we'll pass a comma here and we'll paste this in so with this simple styling and these classes right here we should now see a more smoother transition of an opacity when we open and close our modal so let's go ahead and check that out here so let me go ahead and actually close this don't know why that's open so if we refresh it here and we open our modal you can see that now it comes in a lot more smoothly and if i close it it comes out a lot smoother as well so let's go ahead and work on the animation for our modal content here so what i'm going to do is i'm going to copy this modal animation enter here and it'll come down to our styling and we'll go ahead and do a line break here and we'll target this and we'll say enter active here now we're going to be using the same transition properties here as we have for our modal animation uh enter and leave active so i'm going to go and copy this right here and we're going to go ahead and paste this inside of here now for the interactive on our modal content i want to add a slight delay to this happening so what we can do is pass a fourth parameter here and i can define 0.15 seconds okay and then what i want to do is we're going to duplicate this down here for our leave active and then what we'll do is we'll say leave active like this and we'll remove the delay now we don't want to just transition the opacity here you want to target all so i'm going to change this from opacity to all here on these two enter and leave active classes okay so what i'm going to do is we're going to copy this once more and we'll come down here and we're going to target the enter from here now for this animation what i want to do is first off we're going to have the opacity and we're going to set this to zero now to make it look like the modal is popping out at you we want it to start off a little bit smaller so we're going to do here is we're going to target the transform here and we're going to set it to scale and we're going to go slightly smaller so the default is one we're going to go is .08 here okay and then what we want to do next is you want to we can just duplicate this here and what we'll do is we're going to remove the opacity here because the opacity is going to default go to zero when we actually transition out of the modal itself so there's no need to define it here when we're actually leaving so what i want to do is we're going to change this to leave and we'll say 2 here we want the scale to go back down to 0.08 so it looks like the modal is actually going back into the page okay so we could probably do some shared styling here but either way we're going to have to have do two different selectors for the opacity property here so you can do what you want for the styling but this works just fine so that's going to do it for our animation here so if i save this we should now have our modal look like it's coming at us as well as it actually come in smoothly still when we click on it so let's go ahead and test this out here so if we open it now you'll see that the modal is popping out at us and when we close it here it's going to go back into the screen okay so that's going to go and do it for our reusable vue3 modal component if you guys did enjoy be sure to leave a like on it down below and subscribe if you guys are new to the channel for more content like this and i will see you guys in the next one take care

Channel: John Komarnicki

Views: 26,040

Keywords: vue 3, vue, vue 3 carousel, vue 3 slots, vue 3 props, vue 3 composition api, vue 3 tutorial, vue js, html, css, javascript, vue modal, vue 3 modal, vue 3 modal component, vue modal component, vue reusable modal component

Id: NFdvWBh-D6k

Length: 33min 8sec (1988 seconds)

Published: Mon Aug 02 2021