We have this Login form and then we have a Sign Up form. Now we could create two separate components, we could have one like we have right now with log in and then one for registration or sign up. But that really doesn't fall in line with the entire spirit of building out component based applications.

Whenever you have two elements that are incredibly similar, then there's a good chance that they should be a single component, and so that's what we're going to do. We are going to see how we can create two separate components, and then by leveraging some built-in tools, we can make their behavior flexible.

So we can have a log in form that only shows an email and a password. And then we can have a sign up form that is going to handle registration, and it's also going to have other elements right here. So let's get started in building that out.

I'm going to switch to visual studio code, and let's go to our Login component. I actually want to change the name of it. I'm going to call it just our auth component, A-U-T-H, like this. So it's just going to be called auth, and the reason for that it's going to handle a couple different processes now, not just logging in. So I'm going to rename this, and then we're also going to have to rename how it's being called.

So once you have done that, hit save. And then from the home page component, let's change it so the import is no longer log in. Now it's just going to be the auth component and we'll call it "auth/Auth." Okay, so this is going to be all we need in order to change it, along with registering it properly.

There you go, hit save and now come back, and let's see if it's fixed? Nope, it looks like we have something... we have an issue here. It says unknown custom element Login, did you register the component?

And it's because we did not call it properly here. So now, change it in one more spot to auth, hit save, and now it's working.

Okay, let's see how we can have a registration component here, so we can add one. Well, when it comes to rendering the same type of component multiple times on the page, vue really is very flexible. So if you just copy and paste this line right here, you can hit save, come back, and you can see that you have two components on the page.

Now something that is also very interesting here is this gives you the ability to have two completely different states. Which means so that this component right here is going to be treated differently than this one.

Say I type in "Jordan@Dev.com" here, notice that it did not change the value of this input.

That's because these two components, even though we duplicated them, they're actually called separately. One of the easier ways of understanding this, or at least it's how I was able to understand it when I started learning it, is if you think about these kinds of components as the blueprints to a house.

So when you go and you have this auth component, this is like the blueprint of the house. It is not the house itself, it is just a set of rules for how the house should be built, what the dimension should be, what materials should be used, and those kinds of things. But it by itself is just that, it's just structure.

When we come and we call this, it is like we're building the house. So when we called auth here on line four, then that was like we built the house using the blueprints. If you come down to line five, it's like we built another house using the exact same blueprint. So they are completely different, just like if you go and use the same blueprint to build two houses in real life. Then those houses, even though they are going to be very similar, they still are technically different homes. It's the same way here, the same rules apply.

This auth component may have the same set of rules, and you may be required to follow its processes, and work with its data, but it is still a completely different object then what we have right here, so hopefully that kind of makes sense. So now that we know that, let's see how we can treat these differently.

So what we're going to do, I'm going to try to keep a few of these guides short, so I'm going to pause the video right now, and when we come back in the next guide, we're going to see how we can pass different data to these components so that we can start changing their behavior.

Resources

• Source Code