Generic Component

[00:00:00]
>> So if we're taking a look at the code that we have right now, you'll notice that if you checked out the 09-beginbranch you'll notice there's a new project in here called cest-la-vue. And so for those not familiar with the French, cest la vie just mean that it's life.

[00:00:11]
This is life and so this is view. And so inside of here, we actually do have a little bit happening here. So I do want to walk through this with you because I will try to sort of to centralize the exercises around cest-la-vue in order to just provide some context.

[00:00:25]
And basically give you the experience of walking into a project that either has already had some call it legacy code and that way you feel like you're working with stuff. But that said I wanna emphasize if you feel more comfortable just working with your TV show form app to apply these concepts, please feel free to do so.

[00:00:40]
I just wanted to provide different contexts to allow you that practice of seeing what it's like when working with code bases. So let's go and switch over in here real quick into cest-la-vue. And let's go ahead and run that, npm run dev, great. Now if we open up here, It's on 74 now.

[00:01:04]
That's right cuz the other ones running, make sense. Okay, here we go. We have cest la vue. It's a fairly simple app, but it has a little bit of styling this time, so not just raw html and whatever the browser provides. And we have a home and login page, or at least what appears to be.

[00:01:17]
If we take a look at our app.view, you'll notice that there are two components that are already pre-built for you, there's a homepage and a login page. If you look inside the package.json, you'll see there's still no router library. So there's no paths being changed or anything right now.

[00:01:33]
What we're doing here is that traditional single page application model, which is like every JavaScript trying to manage everything, and so it's just routed there. And so what's actually happening here is you have this reactive data that's tracking the state of the current page quote, unquote. And so here we have two methods that assign the current page to home or login.

[00:01:53]
And then down here, we have the ability to say, okay, well, if the current page is home, show this component or if the current page is login or actually in this case, it's an else. But as you can see, that's your basic check to see what we're swapping between.

[00:02:08]
Now here's the cool thing. This right here is great but you can imagine if that list gets long, and again, for routing, eventually we're gonna get into the library that will also teach you how to switch routes. But if you have a list of components that you might need to swap in and out and make it dynamic, it's kind of hard to have that all managed out inside of your templates, right.

[00:02:26]
Either the conditionals we had complicate it, how would that actually work? So when it comes to dynamically swapping out components, Vue has a native component aptly called component, because what you're doing is, you're basically defining a generic component that JavaScript will basically help to define. So in the case of our app, for example, what we do is we pass it a prop called is, and this is a specially designed prop for the native component.

[00:02:51]
And so if we just do it manually ourselves, we can say, basically, we can say, we're going to the homepage. And so in this particular case, you'll notice that home is basically being bound to just a plain string and there's nothing special going on. And so if we think about it, this is really no different than just declaring your homepage directly as a component, rendering out on the screen.

[00:03:12]
But what we'd like to do is actually make it something that is managed if via JavaScript. And so what we could do in this particular case is we can say, you know what, let's do this, let's create a computed property. And we'll call it, and this time, this one is called currentPage, and then we'll say, renderPage.

[00:03:34]
And the way renderPage work, we'll say is, actually, yes, this is how it will work. Return this.currentPage plus whatever, so basically we're looking at the naming of the component here, in this case, it's homepage. And so we can see now that because, whoops, let me go back, okay.

[00:03:53]
We can see now because we're only basically having the current page defined via the first part of it, via home and login, this means that we can basically tag it on to page. And if we save that now, [SOUND] yep, that's totally fine, and then bind this to renderPage.

[00:04:12]
That's good, there you go. That's swapping in and out now. And so what's really cool about this now is that you basically get the ability to do some pretty complex logic things. And then more importantly, you can actually start then when it comes to really making your application dynamic and having the backend define maybe which components your users prefer, because you're managing a CMS site that might render out certain widgets.

[00:04:35]
You might actually then do a loop through your Vue4. There's a bunch of things that you end up being able to do with this, but it's something I just wanted to expose to you all because as we go through this concept is actually gonna show up again as we go through things like routing.