 Hello, welcome to another video with me. This is part two of the component communications using Vue.js. If you have not watched the first video, I have recommended you watch that first. So this time, we're going to switch over to the CDN library to build the Vue components and perform the communications. So this result on the right side is the result of the Vue.co line, which we did in the previous video, as you can see over here. So what it is is just basically I'm copying all the assets in this folder here. Again, move that over to this Vue.js folder so we can have it kind of like a similar output on this side. So basically copy the base CSS logo and the main CSS. Now this one has, so this folder here is nothing. I'm going to delete this so it's not confusing. OK, so the index here is the index I'm going to use to store the tag I will inject right here. I'm using the version 3.3.0. Anything that is above 3 will work just fine. And then here is the main.js. This file must be a type of module in order for this to work. So keep that in mind. OK, so we're not going to touch this at all. The only thing that we're going to find a little bit hard to do is because since you're using the CDN library, you're not going to be able to have a nice template as you write it in JavaScript because we'll put that inside the script as opposed to write in the HTML. So let's head over to the main.js. This is the root entry to the program. I'm going to do something very similar to the CLI version. So for example, if you go to the main, it looks like that. We can do something similar to this. I'm going to show you how that could be done. It's really easy, actually. Let me move this down to the bottom so you can kind of see and compare the two, OK? So this is the CLI version and this is the CDN version. So I'm going to go up here. Notice again, once you install at this library, you have access to the global API. That's why it's called global. It's available globally. Now, this is version 3, so you're not going to be able to use the new keyword anymore. And same thing here. As you can see, we don't have the new keyword to a stichative view object, OK? Excuse me. OK, so first, we're going to ignore this part. The create, we need to import that. So we can do something like this, very similar. I would do, instead of saying import, I'm going to do a const, destructure the object called createApp. Is this coming from the view API? So we get that app. And then the app.js here, I'm going to wait for that second because we haven't created one yet. But I'm going to go to the create app. And then we're going to pass something to that. We call it app as well. And then we're going to mount to the tag with the app ID. And there we go. We'll come over here to show you similarity. OK, so we're going to launch this HTML on the right side so you can see it. I'm going to go into the open web server. And there it is, nothing there yet. You can also press F12 to see all the errors. We can see what's going on, right? We loaded a bunch of errors. Yeah, OK. Now, so we're done with this one here. I'm going to go back to the main. And then the app component. So they use a different file, so we're going to do the same thing. I'm going to go over here and create in the view.js file here another project, app.view. We'll create something similar. We'll call it app. I'll use lowercase, by the way. So it's highly recommended to use lowercase for your files. Then this is going to be the app component. So we're going to import it right here, like in the main. This should be up here. I'm not sure why it's going down there. So we do this part now. We're going to import it here, OK? So we're going to import the app from the file call app.js. Just like that down there, except it's JavaScript as opposed to that view file. So this is the main entry. We're done with this. We're not going to mess with this anymore. So we can turn this off, OK? So there we go. We've got this up. Now, the app component, this is how you do it. So we're going to export a default. Now, I want to start off using just the options API first, because that's easier to understand. So I'll put here, for now, options API. And then we're going to switch over to the composition later. So what do we need? If I go back to the app component, I'm going to copy the template just to make it a little bit faster. I don't have to redo this all over again. The data, you can see here we need the data, the city, and so forth. I'm going to copy and let me put this down here as we can see a bit faster. I need my data. So here's the data. Again, it's a function. Return some data. So this is the data I need. I'm going to copy this, put it here, all right? And then my functions, same thing. Basically, copy this. I mentioned in the previous video, the setup is exactly the same, right? Same thing. My template, since I don't have the luxury of the template tag here, what I'm going to do is I'll use the built-in template attribute. Let's put a comment here first. We call it template, and then it's going to be a string. So we put it right here using this template syntax. And then I'm going to copy everything inside the template here from the header down to the main, actually. I'm not going to use this, but I'll just put it anyway so you can see how that actually works. We're writing here. So this is everything here already, right? So the CSS, we're going to ignore that. I think that's it for this one. We'll import this, the hello world in a minute. So let's see. I want to slide down here, OK. And we're going to move this over a little bit. It's a little bit nicer. As you can see I mentioned, it's not as nice anymore because it's not HTML. It just text a little bit ugly, OK? So now we then need to go in. So we have a hello world component here when we pass this data down. So we're going to go up here. And then we need to import a component called hello world from something we haven't created yet. So I'm going to create a component called hello-world-js, OK? When we input that in, we're going to register right here under the components property. And then we'll call it hello world, OK? All right. So I'm not going to do the welcome here we need actually. We're just going to use this part here, OK? So now it's almost done, right? Because we haven't created that hello world. That's why it's fail. So let's go over here and create our hello world. Hello-world.js. Same thing. I'm going to do the export default. And then object, I don't think we have any data. We have the props property. It will look like this now, right? Props. And then it's an array of properties. What properties do we have? We have, if you remember, we have the city. We have the state. And we have the update city. These are three properties we received. We'll pass down to the child component. So these are the things that we need. So here we have the cities, OK? I have to match the name exactly as they are, state. And then we have the update city. All lowercase, that is the property we see from the parent. And then we have, I don't think we have any data. Do we have any data? If you have data, you put it here. I just put it here anyway. We're not going to use it, but the data will go right in here. And then down here would be your methods, right? So same as before. And then here we have our template that looks like this. There we go. This is the setup for this component. And then we're going to import that in here, right? We import it here. We register here. We use it in the body of the template. And you see it's working naturally. You don't see any error marks anymore, right? If you did, you would see all the bunch of red errors. How do we know that? Well, pass it out. Go into the template, just type, hello. It is, right? OK, so it is working. And we're going to go. So now down here, then we're going to go and just open that Hello World application. I'm going to go find the definition right here. So here's the Hello World. And I'm going to close this. I'm going to copy what I have here. So what do I have? This is the, no, this is not it. This is the Hello World. I thought I had it, but no, it's not it. Go to definition. It's still not going. OK, go to definition. OK, this is the one. So the props we have, four of them. There are one, two, three. I don't have the MSG. So we put that in here. So notice we pass data to the props because they're using the composition API. You will pass it this way. Using the options API, you pass data to a props property here. And then it's assigned to an array of property names. This are actually, like if you look at it, it's just like strings, but they're actually not. They're actually the name of the properties, like how you pass it down from the parent component down, right? So if you pass the state, cities, updates and so forth here, right? And the message right here. So the message is just a string literal. These are bound to variables on the right side. OK, so we have these right here. So again, once you add the props here, you can use the right way and the template. So now I'm going to go down to the template, everything from the div to the end of this div here. Copy that. And we're going to put it right here. OK, so my closest part now, we don't need this anymore, OK? So give us some room. So here we go. You see that everything comes back to the other one. This is the CLI version. This is the one we just created. Make it a little bit bigger. OK, if I click on it, you see it worked just like before. It's already functional because, again, I mentioned to you the code is exactly the same, right? It's just that you don't have the luxury of creating your nice templates. You put it here as a property. And your methods would have been methods to be used. We could have put it here. I'll show you different ways to do that since we're here. And then the data would have any data, so you don't have to put data here. So if you want to use this data, you can just access directly inside here now without going to like assigning to another variable like you did before and then go to the props. You can just go to the props and access here directly. So, yeah, basically this is it, OK? The way how things work is exactly the same as before. Well, you pass the event listener here. I mean, the function, you pass it down as a property. Update city, you use it right here as a regular click function because this function is a reference to the global parameter function up here where you create inside the methods property and invokes that and updates the data that goes down just like before, OK? And then this emit here, we put right here inline that pass two parameters like this, OK? This is fine. I'll show you one more way. You can actually do that too. Since we're here, I'm going to show you. So let's add a third one for the sake of this example. And this time I'm going to put here city three, OK? So this time, instead of saying something like this, I'm going to take this out and we're going to create a function inside the child component here. So we'll call it handle click or something, OK? So we're going to invoke this function called handle click. So this is the regular event click function that's inside here. This is function is an apparent function, but this is a local function we call it here, OK? When I do this, I'm going to emit same thing, something similar to this. I'm going to do something like this. But I'm going to do use something called this.emit, OK? The emit function here, you can access through the disk reference. It's a part of the view object. So you got to emit this. And then you emit the name of the function. I call it city. Let's call it a different one. Let's call it city two, OK? Then I pass a different city. We'll call it, no, I have no idea here. Let's call it, I guess, Austin would be fine. Austin, Texas, OK? So it's going to go up. And then in the parent component, we have to register down here. I have to listen to this event. So we have another one called update that city dash two. And then equal to update city. We call the same function up here. We just bind it differently, all right? So if you click city three, and boom, there it is. You have Austin, Texas, the Fargo, North Dakota, and Phoenix, Arizona. OK, so that is how you do it. And here. So notice the names here like this. The reason why I said earlier that you don't use capital letters is like this. If you go here, let's say if I change this to something like uppercase city, and you put two like that, OK? Now the two doesn't matter. Let's call it uppercase city. Let's put like two, OK? Update city two. And if I go up here to the parent, and if I use exactly the same name right here like this, OK? And let's see if this works. Press that, and then click. OK, you see that it actually still works, right? Which is interesting. Sometimes it may not work. So let's see. Yeah, if it doesn't work, I probably had it in a different experience that sometimes it doesn't work. If it doesn't work, make sure you break this down into separate words like this. And then if you do that, as you can see, it still works. OK? What happens if you actually do the automatically for you? If your property has a capital using the camel case or Pascal case, every time you find a capital letter like this, usually if you will automatically convert it using, when you convert it to the HTML properties, it will actually put hyphen between every capital letter. So it'll be hyphenated for you. So just going to follow the convention and so forth. So again, just use all our case, OK? So here we go. That is how you do it using the CDN. So nothing different there. Now I'm going to show you how you can actually use the composition using the CDN version, OK? Because you don't have the script tag. You don't have, for example, if you look at this part, not this one, the shell component, you don't have to set up in the tag. You don't have the script tag I'm saying, right? So you can't do that. So how do we fix that? So in the, let's go to the, yeah, we're going to convert the app here to using a composition API. So the template will be the same, OK? We're not going to touch the template, adjust that the method and the data will be different. So what you do is right here, you're going to call a function called setup, OK? And then this function set, as you can see, still works. Data is still here. I mean, normally you don't want to put data here in the setup because both of them contain actually data. So it's quick confusing. Just go one or the other, OK? So don't use both. I think it's a good practice. So inside here, you're going to return an object. The data you return here is really these are the ones that you're returning, OK? So except, remember, compositions, they are structured differently. It's not object. It's the actual variables. So in other words, if I put this inside here like this, OK? No, no, actually, so I put right here. Inside the space before the return, these will be like your regular JavaScript syntax. You remember we did this earlier in the previous video, right? Cons like that. And then maybe you'll call this let because we're going to change that, right? That will be put a semicolon here, semicolon there. And then we're going to put, so the return statement will be kind of similar. We're going to return the cities. If you need them to pass them down to the template, you must return these. So cities, we have this state. I think those are only two. Oh, we also need the function, right? So eventually, this function here also move into the space up here. So I'm going to copy this, cut it out, actually. But right here, we will turn this into a regular function like this. And then we move all of these things here because it's no longer in the class thing. It's just regular cities and states, things like that. And then we also will return the update city. And then now we don't need this data in this methods anymore. And the template will be the same as it was. So we don't change that. We don't change the component. Leave it as is. So there you go. This is like how you actually convert to the, so put here, this is the composition API. We're using this approach now. So notice we don't register with the graph. So if you don't do that, again, it's not going to be reflected, right? So you have to make sure you have to put it to the, change it back to the reference. You have to import. I mean, if I don't do that, I see what happens. If I click on it, right? You notice it does not reflect it. It's not reactive anymore. The data did change. You see Austin, Fargo and Phoenix like before, right? But it's not reactive. So because we never registered these two data set with the reactive, not reactive. I don't have to message either. Oh, yeah, yeah, it's just local down here. Okay, so again, back to that reactive thing. You have to then import by using the const, destructure basically, from the view. And then you can bind this, cities and the state with the view. We pass though to the view function. I'm going to do a ref function and then now they are reactive again. Once you do that, the cities.value and then state.value, there we go. That's it. That's all you have to do. And now they're reactive. Well, if you want to see that, we have to go cities.value here. Okay, refresh. And everything is now back to what it was before again. All right. So there we go. Using the composition API via the CDN, very similar to the other one, except you importing from the view object as opposed to the view file from the nodes module. The hello world here is the same thing. And I'll let you convert this if you want to try that out. Okay, I think that's all I wanted to cover. And so if you have any questions, please let me know. Again, I kind of went really fast. If you want to see how things work before, it's in the previous video, the part one. So please watch that because the code is exactly almost the same. All right, thank you so much and I hope to see you in the next video. Bye now.