Now, if I open my editor, here is the code that we wrote in the previous episode. But you know what? I want to come back to this so that I can show you how I would actually do this in real life. So with that in mind, I'm going to duplicate it and call it backup, so that we can return to this maybe in an episode or two. Okay, and now on index.html, let's clear it out entirely. So that we can start from scratch. Like so. So right now, all you really know about Vue components is that, well, this is one.

Another one might be an assignment list item. Any of these could be their own components. But yeah, right now, if we switch back, we're just putting it all in a single file or in a single component, which isn't actually realistic. Okay, so let's see what we can do here. If we want to create custom Vue components, you can either register them globally on your app, or you can add them locally to parent Vue components. Let's do it like this. I'm going to add a components property. And yeah, here is where I could do things like appButton, like we just saw.

I'm going to add a components property. And yeah, here is where I could do things like app button, like we just saw. Or what did I say? AssignmentsList, that could be its own component. AssignmentsListItem could be its own component. Maybe you have something related to, I don't know, an accordion. Maybe that could be its own component, and this would be the way to register them. Now the important thing to keep in mind here is this object will take the exact same shape as what we have up here for app. It's the same thing.

as what we have up here for app. It's the same thing. It's still a component, which means it could have a data method. It could have a mounted hook. It of course will have its own reactivity. It's the exact same interface or architecture, so to speak. Okay, so with that in mind, why don't we say when app button is mounted on the page, and we learned about this, I could say alert('hello'). Okay, so if we run this in the browser, what do you think is going to happen? Let's have a look.

Okay, so if we run this in the browser, what do you think is going to happen? Let's have a look. I come back, I give it a refresh, and no, I don't see anything at all. And this makes perfect sense if you think about it. We registered it as a child component, but notice we never actually used it. Here's how we use it. And it's very simple, just like any other HTML tag, app-button. Okay, so now if I come back, give it a refresh, we do see the alert because the component has mounted to the page. Cool.

has mounted to the page. Cool. Now, here's the cool thing. When we create these custom components, it's almost like a way to tuck away logic or markup or behavior in the shadows, so to speak. So here's what I mean. Maybe our app button should have a certain set of CSS classes that should always be applied. Well, we can do that. Here's how. We have our tag here.

Here's how. We have our tag here. Let's specify what the shadows look like, what the template for AppButton should be. And we do that. You can actually do it in a couple ways, but first, we could do it by declaring a template property. And I'm going to use backticks here to declare whatever markup should be basically pasted in when we reference this, at least that's an easy way to think of it, if not quite accurate. Okay, so if I said, what's up? Now, when I use AppButton, I'm actually going to see a div that says what's up and also

Maybe we should also add a little bit of padding, maybe padding five and then some additional padding on the Y axis. And you get the idea. So now notice, I can reference this component as many times as I want, and each one is sort of like its own instance. So let's create two. Come back, give it a refresh. And now we have two instances, so to speak, of our app button. Pretty cool. But now, of course, we don't actually want to hard code the label for the button.

Pretty cool. But now, of course, we don't actually want to hard code the label for the button. We want these to be as dynamic as possible. So really, I kind of want to do it here, submit. So notice, yeah, I add it here, and yet I don't see it anywhere. Okay, here's how we can do that. This represents what we call a slot, and if I want to slot this submit text in somewhere within our template, then we use the slot tag, like this, slot. And yeah, the way I think of it is we're slotting in this bit of text right here. Okay, so now if I come back and give it a refresh, it works.

Well, now you have a really easy way to declare a button with all of that flexibility. For example, right here, I could say on the button, I want it disabled if some condition is truthy. Maybe that condition could be a property called processing. Okay, just like we did before. Let's create a data method here, and we could return processing. And by default, it's set to false. But if it's set to true, then disabled would be true, right? Have a look. Right now, it's not disabled, so I can click on it.

Have a look. Right now, it's not disabled, so I can click on it. But if I forced it to be in a state of processing, refresh, I don't have any default styling because of Tailwind, but you can see that it is in fact disabled. Maybe we could say if it's disabled, then let's set a cursor of not-allowed. Yeah, and now if we have a look, we'll see that not-allowed icon there to provide a little more feedback. So yeah, we're not going to review it right now, but maybe what you could do is when you click on the button, you change processing to true. You make an AJAX request to fetch a bit of data.