Now I want to go, and let's go back and re-organize some of our code, and so this is gonna be a much shorter video. We're gonna now start to split our components up. Up to this point, I've really been putting everything here on the dashboard, but if you've seen the design and you remember the design, I'll switch back to it right now.

You remember we have our log in component, and this content is actually on the home Vue, and then we're going to be adding these kinds of cards into the dashboard. I think we're now ready to start splitting those up, so let's come here, and this is also gonna be a nice little exercise for seeing exactly how easy it is to move components. This is part of the strength of a component-based architecture, is you're able to simply pick up a component and move it anywhere else in the application that you want.

We are first gonna start off with the in the dashboard, and we're going to grab the homepage content and then this log in component. I'm just going to cut all of that and move it back here in the homepage. I'm gonna get rid of that little text that said "home" there, and so now we're just gonna have the content and then the log in component.

Let's go clear this off of the dashboard, and I'm also gonna remove that little input and I'm just gonna put it back and just say this is the dashboard. Now we can also remove our import statements, just like that, and now move them in home and hit save.

Now let's come back and I want to remove some of the content that we have there for the component lifecycle hooks. We do not need the email, password, and then we can definitely get rid of some of these other ones, like the sub-domain that was just there for demo purposes. So, you can just grab those four data items, and then go and we're going to create a new data function here. Under name, say data, and then make sure you put the parens after it because it is a function.

Now inside of here, if you just reference back, we want to return the data items. Let's just grab each one of these, put it inside, and now say return. Then we want to return an object, just like this, hit save, and that's everything that we need in the home, I believe.

So now from here, we just need to register those components, coming down, let's just put it right under the data object just like this, so we have the homepage content component and the log in. Now we can get rid of each one of these console log statements, so we're gonna clear all of this out.

Eventually, we're going to be adding some functional ones in, but just delete all of that, and then this custom method here, we're going to eventually use that, but not right now. We have now cleared out this dashboard, so it is gonna be just a plain Vue.

If we hit save here on home, we should be good, so let's switch back here, and let's go back to the homepage, hit refresh, and see if we have any errors. So far, that looks good. Now, if we navigate to the dashboard, that is all working, so that's perfect.

Now we do, it looks like right here, it says we have an invalid handler for a vin update, okay, and that makes sense. If you remember when we put that emitter inside of the log in component, and in the log in component, let's clear out these before update items.

Now we have this update log in details, the error that we're getting here in the console is just saying that we have set up this emitter, called update, but there's nothing actually listening to it. That's why we're getting a warning, so we need to set up an update.

Let's go into home here, and you can just say methods, and down inside of the custom methods, this is where we're going to define that update. It's just gonna be the one that we already had, this handle log in update, just like this, and scrolling down, just paste that right in, and then inside of it, you can do a console log just to test it out. Say updated, and then we'll pass in data, and then we'll pass that in as an argument, so we're just recreating what we did earlier.

Now, if you clear this out and hit refresh, it looks like we do not have those same errors anymore. Now if I type log in, we're now getting that data. We're exactly back to where we were, which hopefully that isn't depressing to you, but I think what we did was a nice exercise in being able to see how you can pick, and choose, and dissect these components, and you can do it in a much easier way.

If you were to try to do this in some MVC type framework, like Django or Rails, what we just did, this whole process would've required an extensive amount of code changes. In fact, this is something that could've stretched on for multiple videos to do what we just did with really just a few lines of code.

This kind of goes back to the strength of the microservice architecture, is that everything is very modular. If you write a Vue or a React application in the right way, then you can simply pick and choose the elements that you want rendered on the page, and then when you want to change that up, you have a lot more flexibility for doing that.

Now that we have everything cleaned up, and now what we have is a much closer example to the design, at least from a structural perspective. Don't worry, I know this doesn't look anything like the design yet, that's perfectly fine. We're gonna be getting into that here in the next few videos, but for right now, I like the structure that the app is taking on.

Resources

• Source Code