All language subtitles for [English (auto-generated)] Build a Reusable Modal Component Using Vue 3, The Composition API & Slots [DownSub.com]

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