Now that we've walked through the onto generated component here, I think we're ready to take a look at how the router works how we can integrate with it and then how we can create our very first component here. So I'm going to go into the router index file which is right here and I want to create another component.

So I'm gonna say import ContactUs from @/components/ContactUs";, thats a common type of component to build out. Now we've not created this yet. So we'll probably get a little error there. And yes it says error module not found. That's perfectly fine. We'll take care of that later. And now I'm going to add a another route to the router.

Now with the path it's very important. Do not just say contact-us for the route. You also have to put that slash at the very beginning. So that is something important to know, so I'm going to say, /contact-us. The name is going to be Contact Us and then the component is also going to be ContactUs. So that's all we need to do there.

It's got to keep on giving us this error until we create it and that's fine. Now in components I'm going to create a new file and then call the file ContactUs.vue. And now with that open now we can create the component. So I'm going to start off by creating a template tag. Then let's add a ending template tag then we need a script. Then we're also going to have to have a ending script just like that and then we can also have a style and an ending style just like we have right there.

Now there are a couple requirements that we have. We don't have to have a style in there but we do need to have something in our template so I'm going to create a wrapper div here. Inside of it let's put it a <h2> that says Contact Us. And now in the script this is where we need to export our components. I will say export default.

If you want some guidance you can just always look at the auto generated one you can see we have export default. We have to have a name and then the data element in the data has to return something.

So we're gonna say export default, let's go to the name of just keeping everything the same. Then contact us and then the data function and then inside that data function we're just going to return an object and let's put some type of data attribute here. So I would just say name, and say Kristine. Now if I come in up here just to make sure that all of this was working, I'll create an <h3> tag with double curly braces. Save it, and it looks like we have a little module error. Let's see exactly where that's at.

So we have contact us. Oh and yes I need to put an end on the name tag, there you go. OK so now we should get it, and I have to admit I am used to having a little more auto complete. So there we go. Now we should get it without any errors. Okay. So we're not going to see it yet here because remember we have to go to contact/us. Just like this and that's working. So it says Contact Us, Kristine.

If we were to change this data here; so if I were to change this to Tiffany, and hit save. Now you can see it says Contact Us Tiffany. Obviously usually you're going to be getting your data attributes in from some kind of API. And if not and you can just hard code them up here. But I wanted you to see the three elements that make up a view component. You have a template tag. You have a script tag and then you have the style tag. So those are the three elements you need to make sure that you include whenever you're building that out.

Now the style tag as you can see is optional. You only need to have that if you are applying your own custom styles. Usually I find that I will use this quite often but it's not required. The one thing you do have to do is you need to make sure that you are exporting this and so you're exporting some kind of component with the name and then a date attribute. Also let's just test this out. I want to show you something here I want to show you a couple things.

One of the ways I learned the most is by just taking some of the kind of standard practices and some of the auto generated code and then I just kind of rip it apart and play with it and see what things break and what things don't and that teaches me a lot about the way the framework works.

So I'm going to hit save. And if we come back you can see this still works. So when we say something's required we don't actually mean it won't work without it.

You can create a component that only has a template. Now that obviously doesn't have a lot of helpful information. If you say you want to have some kind of button or some page element that was very basic and you just wanted to be able to import it and then maybe pass some props to it which we're going to talk about props later on in the course then you could do something like that. I find that's pretty rare that I do not have some kind of script tag here and some way of being able to add some behavior to the system.

But just so you know it is possible to work without it. Now I will show you something you cannot do. And so if I pull out these divs and just have these two <h2> tags here.

If I try to save and then go out now I have an error. So what is the problem here?

Well anyone coming from a react background is probably going to know what this is but if not what a template tag requires is that it needs to have one wrapper component. So it needs to have a div or some type of HTML tag that is wrapping all of the other elements inside of it.

So if you ever run into that issue it may be that you simply started laying out your HTML tag's and you do not have a wrapper DIV or some type of wrapper HTML element that takes care of those. So if I hit save and come back, you can see that everything is back to working.

So in review what we covered in this guide is we saw how we could add a new path to the router component. Then we saw how we could go and we could create a component completely from scratch. We saw how we need to have a template tag and then we saw also how we were able to build out a script tag. So we could add some behavior to our component and then at the very bottom when we can to add our styles. So great job. If you went through this section I think you now have a really good foundational knowledge and everything you're gonna need in order to go through the rest of the course and start building out real projects.