Custom Components

[00:00:00]
>> We've been talking about single file components. And it's really time for us to really start diving into it. Because what we've really done is basically moved our entire app from index.html into app.vue. But this code, there's a lot going on here, right? Especially, cuz there's a lot of logic and more importantly, things can be scoped kinda differently.

[00:00:19]
So it's time to really dive into component-driven development at this point. Okay, so for what I'm gonna do here, I'm gonna delete all the boilerplate inside of our code base here. So that we're not dealing with any boilerplate. So let me go ahead and refactor that real quick.

[00:00:39]
Factor: delete boilerplate components, okay. So now, let's talk about how we actually create components in Vue. As we mentioned, single file components are basically the way to go. So let's start with something like the, let's start with something simple. Actually, I'm in the wrong directory for this. Let's go back to the playground, cuz we'll use the exercise for that.

[00:01:06]
Okay, inside of my playground, let's take a look at this one. So now, that we're actually in the build tool though, I need to actually make sure I run the right one. So I'll go back to my playground app and run dev. And so now, that we're running it, there we go.

[00:01:23]
We see that it automatically refreshed without me doing anything, so this is great, we have the update. All right, so let's take a look at what's going on inside of our app here. There is a lot, we've played around with different concepts, we talked about lists of numbers, we talked about this increment thing.

[00:01:37]
So basically, let's start with the simplest thing, which is that we have a counter component. That's like the easiest thing that we could split off from this at this point. And so what we can do then is we can say, okay, let's go into the components folder. And let's create a new one called counter.view, okay?

[00:01:53]
So I'm gonna go ahead and full screen this, so that it's easier to see, since we don't actually need to see the live updates right now. When you're creating a new component, basically, we have our basic building blocks. We have our script block and we have our template block.

[00:02:07]
We don't have any custom styling right now. So I'm not gonna add anything. And so let's start moving some stuff over. So what I would do is I would actually start by saying, okay, so inside of my script block, I will export a default object, cuz this is what I'm configuring.

[00:02:20]
And so inside of my data, what do we have that we wanna migrate over? Well, we care about the count, so that looks good. The counter title, yeah, that sounds good too. And we care about the incrementAmount, this is good. And then listOfNumbers's not relevant. Okay, okay, we have some computed properties, that's relevant for displayTitle and optimizedIncrementAmount.

[00:02:45]
So actually none of this is related to anything else, right? Cuz we have the count, which is here, we have the displayTitle, which is here, and the incrementalAmount is here. Meaning, we can take this whole block actually and just cut that from the app.view, and then we can put it here.

[00:03:01]
And then finally, we have this increment count method that we're using. And we're actually not even using the watch. So we can actually delete this and we can cut the methods entire block over. And then what you'll see that we end up having here is that we have all of our logic now scoped to the counter, right?

[00:03:22]
Nothing that's relevant to it is kept to it and this is great, right? And to be clear, this is not a view thing like, React Angular. We've all been basically thinking this way as far as like keeping our concerns scope to the same file. So it's easier for people to understand.

[00:03:35]
You don't have to jump files as much. Now, of course, we've got to make sure we move all the stuff that's related though to the counter app when it comes to HTML. So we have that here, here, here, here. I think I mostly organized it together, so there's not too much mystery there.

[00:03:49]
And so I can cut all that and just drop it over here inside of the template. And so what you got here now is we have our scoped JavaScript and HTML. And so now, it's the time where we actually kind of wanna see what's going on inside of the app.

[00:04:05]
And so if we take a look, you'll notice our counter app is gone. And that's to be expected, because we've already moved everything. But what we haven't done is we haven't actually called our component. So how does that actually work? Well, just like standard JavaScript, what we wanna do is we wanna basically import our component.

[00:04:21]
So we wanna import our counter component where are we importing it from? Well, we're gonna move up a directory, cuz right now we're in app.vue. We're gonna move, wait counter is in the wrong one right now. It needs to move down here, okay. So we have our app.vue and we're gonna import counter.

[00:04:38]
And so this is following the file path directory where we have the root directory which is this flat one right here, I'm gonna go up into components. And then we're gonna import counter.vue, it's all we're gonna do. You'll notice that our extensions are yelling at us, because why is saying hey, you import something you never ever used it?

[00:04:58]
And so the way we actually register a component inside of use option API is well, there is an aptly called components option, where we can basically register our counter just like that. And then-
>> Your methods is inside of your computer's encounter?
>> Computed, yeah, you're totally right.

[00:05:21]
So the observation was pointed out here that my methods when I copy and pasted was copy pasted at the wrong point. So we should actually move this out. There you go, now, that looks much better. [SOUND] Yeah, that's another thing we'll talk about in a second. Okay, there we go, we have counter and this is good.

[00:05:38]
And then now, we need to actually use it, how to use it? Well, it's a custom component. So whatever we named it, basically, we'll do the trick. And so there we go, there's our counter component. A couple of things that might be new if you're haven't really worked with components before, is that this is what's called a self-closing tag.

[00:05:54]
So this is the equivalent of doing this. It's just a little bit more succinct, because rather than duplicating it over, it's fairly combed as a self-enclosed like this. In addition, something else that view tries to get you to do though, before we talk more about this is you'll notice that earlier I had this error.

[00:06:11]
Which is from es lint in that we really tried to recommend that you use multiword component names. And the reason for that is because you never know when the HTML spec is going to add something. And they basically have, they get first dibs when it comes to one word components.

[00:06:25]
So rather than basically run the risk of conflicting that, what I might do instead is I might call this like base counter, right? This is like the the counter to rule all components. And so you'll notice here though that volar, hey, it says, I noticed you're refactoring some stuff.

[00:06:42]
And you say, what do you what did you notice? And it says, look, I noticed that inside of here, it'll actually track the file path of the thing that it's related to which is pretty cool. So I can go ahead and apply that and now, you'll see that instead of app.vue it's gone ahead and actually renamed it correctly inside of my imports.

[00:06:56]
Which is a nice optimization that it does for us. But once again, I really would like to avoid the single word naming. So I'm just gonna do that like that. And then you'll see everything still works as expected. But another thing that view does for you in terms of extending upon HTML standards is, you might not like the Pascal case, which is where you have the multiword capitalized.

[00:07:19]
And you might say, I would rather just do like the standard kebab case for HTML. And believe it or not, that actually just works. Vue will out of the box basically allow you to convert between two cases, because it knows how to track the differences. And so to say which one is better?

[00:07:39]
It depends a lot on the team that you're working with. I would say in terms of pros and cons. One of the nice thing about the Pascal case is that it becomes very evident that this is something very specific to the app that this is something custom. Granted, if using a multiword component, that also kind of does the job as well.

[00:07:59]
So it's just kind of what you're used to in that regard. You have a question?
>> The inverse of that work, can you name the file kebab case?
>> I should be able to, let's give that a shot. So the question was, can we name the file kebab case?

[00:08:13]
Like that, and then what did it change, well, here we go, notice that we have applied that, so we can apply that. And then inside of here, we're good inside of here. This we can do anything about, cuz this is like an import. And then I think that actually still works.

[00:08:33]
Yep, that's the works. The main thing about that is be consistent, that's the only thing I asked. It doesn't matter which one you choose, just be consistent.