Vue 3 Fundamentals Generic Component
Transcript from the "Generic Component" Lesson
>> 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: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: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: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.