Welcome back to CodeTime.IO. This is episode two of learning Vue.js with demos. As we talked about in the intro is, we're showing you demos. So that means we need to make demos and walk you through the process of how you might make certain components or features that you're going to need on your website. A couple things to note here, all of these demos will be using Vue.js as a CDN, that is, not downloading Vue.js and that is also not compiling Vue.js with something like NPM. So if you don't know what those things are, don't worry about it. If you know what those things are, this might help you, but you might want to check out another series that we have called Vue CLI, and that'll probably be more likely what you're going to need.
Again, we're using that Vue CDN via CDN and we'll be using Tailwind via CDN as well, and each one of these demos will be a single file. With that in mind, all of the demos that I do, they will be on the website codetime.io under this series. So if you want to download the exercise files and do it along with me, or if you miss something, you can download those files and jump on it. Okay. Let's do our first demo here. So I'm in Sublime Text, I have a blank Sublime Text window open here. I'm going to work from my desktop today. So I'll start out by saving this document. I'm going to save it into my desktop here, and I'm going to make a new folder and let's do it like this, I'm going to call this demos.
And then in the demos, I'm going to add a file called demo one, or we'll do it by its name. We'll call this modal.html, as this will be a modal example. So modal.html, we'll click save, and then we'll do exclamation mark, tab and now we have our basic Sublime Text document ready to go. Of course, I'm using Emmet and that's been installed via package manager on Sublime. If you need that setup, definitely check out Sublime Text here on CodeTime.IO and that'll help you get started with our configuration. So with any view document, I need to actually go get view. I need to reference it. I need to configure it. I need to set it up essentially.
We also need to set up Tailwind. So let's go ahead and do that. I'm going to start with Tailwind. So I'm on tailwindcss.com. I can click on the learn more button here, and this will take me over to the documentation. I'll click on installation right here and I'll grab the CDN link. I'll put that right underneath the title tag and where it says, document, I'll just rename this to modal demo. Just so it's a little bit more clear. Tailwind's good to go. The next thing is Vue.js, so that's vuejs.org and I'll just click the get started button. Then on the get started button, if you just scroll down, it literally shows you here is the CDN for the script source. I'm going to put this over here next to the close body tag.
And then if I scroll down a little bit here, I need to get a div ID of app and we'll fix the format in there. And then I need this a little starter code to initialize. So to do this, I will do a script tag and paste it, and now I have my basic Vue.js code set up. If I go into my demos folder and I drag modal into Chrome, you'll see it says, hello Vue now. I'm going to close this and now we have our code and I'm going to make a little bit of room so you can see these kind of side by side as we do this. And hopefully this is large enough size text for you.
Okay. So let's talk about what's going on here very quickly. Well, we added the CDN for Tailwind, so that's going to allow us to do Tailwind classes. I'll give you an example of what one of those might look like. It would be class BG-gray. And then if I refresh, my background's gray now. Tailwind's based on all of these essentially classes, and then you chain the classes together and you make your styles. It's very, very easy to go and do. For example, I'll do another one here. So we'll say, class and I'll set the width to one half, and I'll set the background color to white, and I'll add a shadow to it. And I want it to be a large shadow. So we'll say, shadow LG. I'd also like it to be rounded and I'll set a little bit of padding in it. So we'll say, padding of four.
And now I have a nice little card all set up to go. If I wanted to move it from the top here, I could say, empty-four and it'll move it from the top some. It also comes with really cool flex utilities that they've abstracted away into really nice syntax. So I can say div.flex, and I could do this here like this. And now if I wanted to center this element here, I could say justify-center, and items-center. So from here then, you can see that it's width, one half, its BG, white shadow, large rounded P four. It's flex is justify-center, items-center. So justify center and item center, those are classes that have abstracted the flex utilities that comes with Flexbox.
Of course, for this to work, I need to set a height on this element. So I'll say, height H-screen, which is essentially 100VH. And now I have exactly the element inside the center of the screen. So that just gives you a quick little example of how you might go and do that. Again, I don't need to do that just yet, so I'm going to go back to where I was at before and just say div ID of app, and then inside of it, we'll use message and we'll refresh, and we can see that hello Vue is in fact working. Okay. So that's intro Tailwind very quickly. Again, if you want to check it out, Tailwind CSS here on CodeTime.IO, we have plenty of videos for you to learn quite a bit there.
So the next thing is we added a script and this is JavaScript for Vue.js. And then we open up our own script here down below. Now, of course you can add this script into your own document. Something like app.js or common.js and just link it the same way we have linked to Vue.js. But for things that are pretty short and simple, I like to just throw it on the bottom of the page for a demo and it makes it pretty easy to work with. Of course, what we actually have going here. So var app, this is a variable of app, is equal to a new, so essentially we're instantiating the Vue instance here.
And then that takes an object, and you can see that by the curly brackets here. The first one is the element, and this is what it's going to attach to. So it needs to specify what div do you want to attach to, and almost always, it's going to be a div that you're attaching it to. In this case, we did an ID of app. And so you can reference that, 90% of the time just going to leave the ID of app as it doesn't really need to be something that you need to change. And then underneath this, you have this data and this is commonly referred to as your models. And this is where you can put sort of your model or data information to be stored so that you can reference this data later on and set up all of these models.
So right now it says message and message isn't something unique. We could call it whatever we want. We could call it like cake, for example, and then over here I could write cake and of course, I'll get cake and it'll still work. Now it's not the value cake that's going to show, it's whatever this is actually becoming. So this is hello Vue in our instance. But this here, name, essentially, you can think of it like a variable, but it does a lot more. It shows up here now in inside the curly brackets and we can start to reference it. Okay. So that's our super basics. Let's go ahead and start building out our modal. So to build out our modal, we need to think about what are the pieces of a modal? And if we think about that simply we need a button.
So we need a button you can press. And then when you press the button, it needs to sort of maybe fade the screen with like dark background. And then have a card, essentially in the center of the screen, pop up and you'd have a modal. And then I need to be able to close the modal and then essentially close that modal window and then see the button again. And then be able to click the button again and open up again and cycle around, right? So that's what we're after. That's what we need to create. We're only going to do this with Tailwind and Vue.js, and that's it. And again, this is completely customizable. So you may be coming from the background of something like Bootstrap and Bootstrap has some modals and some basic JavaScript components already built in.
Vue and Tailwind, they don't really have anything like that, it's just built in. It's about building your custom one and it's really, really powerful and easy to do. So let's go and do that. So I'm going to start out by creating a button and the button is going to have a class of BG-teal and a text-white. And I like to make the font bold, so I'll say, font bold. Again, these are all Tailwind classes. Let's do PX-four and PY-two. And then I want this button to be completely around it, so like a pill button. That looks pretty good. So I'll press tab and you'll see it autocomplete. If I refresh now, of course you see a tiny little teal button, but it doesn't have any words in it. So let's add some words.
So I need to write something in it, something like view modal. Okay. So that's set up. Now what? We have cake here, we don't really need that, we're not going to be using it, so we can get rid of that. And down here, we have cake as well, I'm going to get rid of that, so it doesn't really exist now. So now you can see the word view model, and because of the background color, I might lighten this. I'll say, BG gray- and I'll say the lightest gray, and we'll get a little bit off white, but it's pretty light. So there's our button, I want to click the button and I want to open up a modal. Okay. Well, let's create the modal first, right?
Now, both of these elements that we create or any of the HTML that we want to interact with with Vue, it needs to go inside the div ID of app otherwise, it won't work. So there's those elements here. I'll set up a div. This one, I'm going to give it a class of, so we know what we're doing. This is sort of that background faded color, so it should take up the entire screen. And then inside of this, there would be a white card. So let's set this up. I'm going to say just for now, BG-black, and that'll take up the entire space. This needs to be absolute positioned. So we'll say, absolute and we'll pin it to the top. This is the same as top to zero, and we'll pin it to the left, that's the same as left to zero.
That looks pretty good. And we'll press tab now. And we need to give it some height and width, of course. We'll say, each screen and width full. And now we see essentially our button's gone because it has a completely black background color over on top of it because of the absolute position. So from this, we then can set up a card or essentially our white div inside of it. So let's set that one up. We'll say BG-white. And this is going to have maybe P-four, so a little bit of padding all around it. I want to give it a little bit rounded, so I'll say rounded, and that's just going to be a couple of pixels of border radius. And let's see what that looks like so far. Let's give it a height and a width.
Let's just [inaudible 00:12:04]. I'll do this like this. Width is going to be, let's do one third of the screen. And then inside of this, I want to put a H2 maybe and say something like, hello. And I could put a paragraph under here, maybe a little bit of lorem. I'll shrink these lorems a bit much here. And then I might do a button to close it. And so the button will be the same as the other button. I'm going to paste, and then where it says view modal, I'm going to just say close. So this could be some sort of action that you take, save a confirm and then you would hit the button and it would do something else, or it runs something else in your Vue.js.
Let's see what we have so far. So that's what we got. It looks pretty good, but I want that of course, to be centered in the middle and maybe a couple other little formatting things. So I'll move the button down some, I'll say empty-four to move the button down. I'd also like to move the paragraph down or I can make the H2 sort of move down by using margin bottom two and that'll push the paragraph down. It doesn't really matter how you want to write that, it's up to you. Of course, this white box needs to be exactly in the middle of the screen. So to get it exactly in the middle of the screen, we need to make this item be a flex child.
To do that's pretty easy. Make the parent flex, then say items-center. Let's fresh, and you'll see it's now vertically centered based on the space. The next thing is to center it horizontally, we'll say justify-center. And now that's directly in the middle of the screen. I can't really interact with anything though, because there's no sort of JavaScript. There's no sort of action or functions that are going to run or do something. So I need to set up a click event, something that says like, when I do this, do that. And I also need to keep track of the state of the given modal.
So to get started with that, I'm going to just set up a modal and I'm going to set its value here to true, or actually do it as false, because we want it to be hidden to start. Now I just picked the name modal, it doesn't have to be modal. It could be again, whatever you want to call it. I have the hardest time thinking of names, I think, with this, that's probably some of the most difficult things I have. Is like, what's a good name for something? So anyways, I'm going to call it modal. And then the button's pretty much good for now, but we need to have something here to say, if it's going to show or not. So I'm going to use a V-if. Here we go. And that's going to check for the value of modal. All right?
So now it's hidden. Now let's look at that for a second. So the modal value is modal value here and it is false. So let's imagine just taking the word false and putting the word false here. V if, so this is essentially an if statement, but using Vue syntax with the V-. So if this is true, well, it's not true. It's false. So this will be hidden. But if I was to change the value of the modal to true, then it would show. Let's do this as an example, I'm going to set this up as just a basic input field. So I'd also like to see what the value is at any given time. So there's the modal and that'll tell me that it is false. And then I'm just sort of printing it out.
And then I could set up an input field and I could say V-model and then the modal. Now V-model, this is going to bind our model, which is a modal to our input field. So now we see the value false inside of our input field. If I change the value to anything but false, essentially just a letter, it would mean that it has a value and you can see it immediately changed. Again, if I change this just to falser, let's say, it immediately says, I don't read that as a Boolean of false, I read that as a string and that essentially is then going to be true. So that's a basic thing. This is really helpful to test, and this is pretty helpful to test things if you're just getting started out. For now, I'm going to remove those things.
Okay. Now what I need to do is set this up as a click function. So the sort of lengthy syntax that you can do, it is V-on:click equals. And then we need to sort of set this. Now there's a shorthand way of setting this, and I'm going to show you both ways of doing this. The shorthand way of setting this is something that like, modal equals and then exclamation mark modal. And that's going to set as like an on and off sort of thing. Now, if I copy this button over here which says view modal, I'm going to replace it, that way I don't have to re-type that, I'll just say close here.
Now if I refresh and I say view the modal, the modal appears and if I click close, the modal disappears. So that's what this is doing here. That's sort of saying, if it's not set, turn it off. And sort of back and forth. This is really handy and it's really short syntax. But most of the time when I work with a click event, it needs to do more than just turning it on and off. It needs to do more than true and false. And so what I'd like to do is set it up as a method, and that brings us to methods. Also, this syntax here is a little long and Vue realize that, and you can make it shorter by just saying, @click. And that's what you'll see a lot more often. Is @click equals modal equals modal, and I'll do exactly the same thing.
So instead of doing this, I want to say something called modal action. And I'm putting parentheses there though, they're not required. I do that so in case you want to press a parameter and you kind of cannot remember that this is a method or function that you're calling. I'll do the same down here. So I'll highlight this and say modal action and then I can change this V on click to an @click. I also had a margin top four on this, just to kind of move it down. Okay. So here's our modal action. It is a method and we need to create this method. And the method, unlike our last instance, is just going to be able to do more. We can add some code in there to say, what is the method going to do when you click it?
So to do that, I need to add methods. I'll spell methods correctly. There we go. Okay. Methods is an object as well. And some people like to set that like that, it doesn't really matter too much other than just the format of how you're saying it. So inside of our methods, that's where we put our methods or our functions, and those are universal here. So that's our method, which is modal action. And it takes parentheses because it is a function and curly brackets. Now, that's the name, this is if it takes any parameters, something like type or item or action or something like that, right? I'm not going to need it in this demo, you need to do it here and you don't have to leave it there, but I tend to do it just because it keeps a sort of quick glance. It's easier for me to remember what's going on.
So here's our modal action. And now we need to say, when you click on this button, we'll say this.modal, that's going to refer to this modal here. This being this instance here. We'll say this.modal is equal to, and we need to set it equal to true. So let's take a refresh on this and click it and it opens up, but if I click close, it's not going to close the modal because the modal every time you click on the button is always going to be true. So that won't work. So we can make a conditional. We can say, if this.modal is value and we can do a comparison. Now, if I'm going to note here, the single equal sign versus the double equal signs, the single equal sign here means that this demo is equal to that value. When you see the double equal signs like that, that means you're doing comparison.
So if this.modal is equal to false, and that's the Boolean value of false, as we can see this versus a string, this would be a string. We need to use the Boolean value, as a string would not work. And then when that statement is true, so if this is true, then it's going to run the code in height inside here. So I'll take this and I'll paste it inside there. So if this.modal is equal to false, then set the value to true. If this is not the case, then I can run a simple else. If the value is not false, then make the value false. And that's essentially going to be the close. So I can clean this up, gives room to that extra line, and now refresh this. And now I can say, view modal, and it opens up. Close modal, and it closes.
So in here, I might do some other stuff. Like I might be able to play a sound or do some sort of other action. Maybe I need to record the data or do something that the user might need to happen when they opened up this modal, maybe disabled something else on the screen. And this method will allow me to do this, modal action method will allow me to do that. And this is a basic conditional inside of it. The next thing I'd like to do is when I click on this, it's all black, I don't see where I came from. So I'd like to lighten this black. Well, Tailwind doesn't really have this class to do things like that. Your alternative is to create a style sheet. So I can create a style sheet, something like style.CSS, or I can quickly create just style tags. That's what I'm going to go and do, because it's fast.
Again, if you're working this on a project, you'd probably make a style.CSS, and you probably have other styles in there. So with this, I'm going to go and say something like BG- and then this is a class. So we'll say BG-smoke, and this is going to be equal to a background, and you can say background or background color, and RGBA value, and that's going to be 000, and then I'll say something like 0.8. So RGB, red, green, blue, and alpha channel, right? And this is our background color. And you have to do something like this other than opacity, because if you apply opacity, say to this div here, then it's going to make everything inside of it, that same opacity.
So instead, we're going to add a background color to change it. So where it was BG black, is now BG smoke. If we refresh the page and click on the view modal, you can kind of see the button in the background. Let's just lower this so it's really clear, I'll lower it to 40%. I'll click view modal, and you can see now the button clear, I can't click on it. But it's clear that I'm inside of this modal now. If I click on the close, it closes it. So that's pretty cool, right? We got our basic modal. I want to do one more thing. When you open this thing and close it, it's kind of jarring. It's just like [inaudible 00:23:38], it's super fast kind of shows up. Well, view resolves that. Now, if I open up this window a little bit bigger, you'll see the menu appears again and I can, inside here, write transitions.
And I just wrote transitions in there, essentially. And then if you scroll down here and you can read of course, about the docs, and it's a good idea to reference some of the docs as you go. There is this transition tag here. Name is equal to fade, and I can take this and wrap it around my element that has the V-if or a V-show on it. And then I'll tab this in, so you can see that it's clearly nested inside of it. I'll do the same here. And then I'll fix that tabbing. Perfect. Now there's this name called fade. If I scroll down, we can see fade enter active, fade leave active. Transition opacity 0.5S. Fade enter, fade leave active below 2.18.
If I copy this and I go to my styles up top here and paste them, looks like didn't copy it. And then we'll tab all of this in. And now if we refresh and click on our view modal, it'll fade in. We'll click the close button and it'll fade out. So this is pretty easy. It's just using an opacity to fade things in and at the speed of that opacity, essentially the transition of it. If I wanted to slow this down, I could say something like, I want it to be one second, essentially double the speed. And there it is. And I click it and there it closes. So pretty easy to go and set that up.
Of course, you can make your own, or you can modify the way these work. And it's simply just adding the transition name and then the class, and then referencing inside here a fade enter active, and then fade leave active. And then fade enter and fade leave too. So that's the basics right there of a modal. Of course, you can make this responsive with some Tailwind classes to make things shrink up and down. All right. Let's move on to the next demo.