We're in this App.vue but as you may have noticed, we still don't see any of the content on the page, and if you never worked with a stand-alone Vue app, especially one that uses the router, this may be a little bit confusing.

The next thing that I want to do is take a look at the router and let's see what's happening there. We can go to the router directory go to index.js and this is going to contain all of the routes for our application.

As you can see, it's bringing in all of our different files. It has Vue, Router, and it's also importing this HelloWorld component and it does it from this path. This is something that is relatively unique to Vue.

If you are working with React or any libraries like that, you may see import statements that always start off with a dot, but within Vue they give what I think is a little bit more of an intuitive interface where if you do an @ in your path then what Vue knows is to go to the root of your source directory.

If you say @/something then it's going to know OK I need to drop all the way down to the source directory and then follow the chain all the way up. I think that this makes it a lot easier to define and then import any of the components you want to bring into a file.

So it says '@/components/HelloWorld'; and then it has the route details below here. Later on, we're going to get into how we can work with these definitely as we get into more advanced projects we're going to be using the routes quite a bit and see some of the other options we can do.

But for right now we just know this is defining the route. And in one of the next guides are going to go and add some more routes to it. But let's follow this chain.

We have this @ symbol, which we know starts at the root of our source directory, goes to the components directory and then finds this component called Hello World. So let's just save this file and then go to components and there is our HelloWorld.vue file.

Now just a couple things to note because we haven't touched on them yet. You may notice that you have a little bit different naming structure here, where you start with a capital letter and then every other word is also a capital letter. That is one of the common naming conventions whenever you're using Vue and you're creating Vue component.

Just kind of keep that in mind. Many other frameworks will use a convention where everything is lowercase and then you have dashes or underscores in the middle whenever you want to separate words out. But with Vue, this is the convention to follow.

Now that we have this component, we can actually see the data.

If you look at line 10 in HelloWorld.vue you can see that we have this <h2>Essential Links</h2> and we can change this if we want. I want to change this to say <h2>Some important Links</h2>. Let's look and see what that did.

Now you can see that it's been updated and it says "Some important Links". This means that we finally where that data is being stored. Now you may also see that it's using some data binding here, we're calling a message variable so this is something that is specific and that you have access to directly in the component.

So if you go all the way down, you have a template tag, a script tag and then a style tag. And inside the script tag this is where our javascript code is. So here we are exporting default which all that means is that any time someone imports this file they can call this component wherever they want.

The common convention is to keep the name the same, wherever you call it. You could call this component "XYZ" and as long as everything else was properly called, it would still work exactly the same. Just to make sure that you don't confuse yourself.

That is how that works. We are exporting default and then we do give the component a name. This is more so that there is a very clearly defined name for the component outside of the file name. So the once again the common convention here is to use the same name as the file.

Then you have data. Now, this is something that is important to keep in mind if you followed along in the last project you may have remembered that we had something very similar when we created a Vue component. But we put the data inside of an object for its value.

Well, in a dedicated standalone application in Vue, your data is actually a function, and inside of data, you'll return an object. This is exactly the same thing that we did in the previous project.

It's just a slightly different syntax that the creators of Vue have so that it is able to pass these kinds of components around.

And the main reason is because usually when you're working in Vue and say that you want to build out some kind of button component or a widget component, it's just more of a logical approach to be able to treat the data as a function because in Javascript functions are first class citizens, which means you can pass them around however you need to.

You can really do with them whatever you want, you can even pass them into other functions as arguments.

And so that's a reason why I believe that they created that. It's obviously something that's up to conjecture since the creators of Vue get to do whatever they want, but I think that it makes sense that they made that one decision.

Now, the data returns a message, and we can tack more things onto this since this is just an object. Let's put in a greeting.

Now let's come up to the top and inside of an H2 we can call this.

Let's hit save and let's look at the browser.

And you can see it says "Hey there". So we have that really nice scoping and dynamic binding here inside of the component. It is very easy to get inside of the template and to get access directly to any data or any kind of functions or methods you have in the component.

Now moving down just a little bit more, we have some styles. So this is something that is very different than compared to say React, where style organization is a little bit more up to your own discretion. In Vue, it's recommended that you create styles that are specific to the components you're building out.

Here you can see, that we have h1 and h2 styles, then we have a ul and li, and then an a style.

Now, something that is really interesting with how Vue works styles, and this is something that I think you're either going to love or you're absolutely going to hate, and that is that these are scoped to the component.

That means that if you have another component, it will not be taking these h1 or these h2 values. So that is something that can be good but also can be a little bit confusing.

Imagine that you created these styles here and then you expected font-weight to be normal, or expected some size definition here and then you created another component and you saw it was not recognized.
That's because each one of these styles is scoped by default to that component

Let's see exactly how this works. If you open up the inspection tools here our browser, and as you can see, if I select that H1 like I just said if you look over here you can see that we have an H1 style.

The style says font-weight: normal; which is exactly what was defined in our styles. Now this is something that may look a little weird to you. It has a weird written syntax in the tools. That is how Vue does its scoping.

Now, with the h1 and the h2, not only does it create this class but it creates this data attribute where it makes sure that if you add another component on the page, and it doesn't have the data element, those styles would not be applied.

That's very important to keep in mind but that is optional. So say that you wanted to remove that and you wanted to make these styles universal, you can just remove it. That is definitely something important to keep in mind

Now my personal opinion on this, and you can take this for whatever it's worth, I try to use scope here as much as possible.

The main reason is that if I am building out a component I usually want that component to have its own set of styles which makes it much more straightforward when I don't even have to add any weird names

If we want styles that only get applied here and we don't want to worry about overwriting anything or having some weird style cascading kind of issue then you can just add a scope to your styles and then it makes that a little bit easier.

Now I will say if you're trying to style an H1, and you want that to look the same across your entire application, then obviously you are not wanting to scope that because then you'd have to add your H1 style to each component that's going to use it.

The most common way of doing it is to either create a completely separate CSS file and then you can import that manually, or you also can go into Vue right here and you can add it into your App.vue.

To me, I kind of have the rule of thumb that if I have a large number of styles, then they need to belong in their own file or even in their own set of files. If I only have a few universal styles then they can be placed inside of this embedded style component directly at the root of the application.

In review, in this guide, we dissected an entire Vue component. We saw how we could make changes to the template. Then we saw how we were able to add data to the data function here inside of the JavaScript component. And then we also analyzed how styles worked and the difference between scoped styles versus just regular universal styles.