Now, this is technically the wrapper Vue component for the entire application, so you can think of this as the master component. If you open it up here, we're gonna dive into it and see exactly what's included.

So, by default, with the CLI, they gave us a basic type of component that has a template tag and then it has div with the id of app, and then it also includes the router links.

Now if you remember back when we were generating the application and you remembered how we said we wanted to include the router. If we did not say yes that we wanted to include it, it would have skipped this part of the code, so it would not have this anymore.

And we're gonna talk quite a bit about the router in future guides as well. But for right now I just want to point out that we have a set of router links here. And if you look at the page that was generated, you can see it has the home and about links, and then down below it, we have the router view.

App.vue

Now, once we get more into the router, this'll start to make more sense, just for right now, know that the router view works as a placeholder that yields to whatever components are being slid into it. So in other words, when we click on the home link, then what Vue does is it takes all of the components that make up that home view and it slides it directly into where it says router Vue, so, that is all that's happening.

And then when we click about, it throws the home off and it gets the about component and it slides about in, and that is how, at a high level, it works.

Now we don't have the script tag here, because the app component isn't supposed to have very much logic at all. The app component is simply there to be a wrapper, and in this case to provide some of the structure for the routing. But besides that, you shouldn't be performing a lot of tasks directly in the app component.

Now, it also has some styles and you see by default, because when we generated the application, we chose to use sass as the processor for CSS. And that's a reason why it's using sass as a language here, and we're gonna be using this throughout the course, and it gives us some basic styles.

Now, technically we could just get rid of all of these, hit save, and you'll see that we're now pretty much working with a basic HTML application with no real styles besides what we included inside of the Home.vue.

So I'm gonna reverse that and we're gonna be customizing this as we go through the course. Now I'm gonna open up the left panel and we can have three more files we're gonna go through in this guide.

The first one is main.js, now this is a very critical file because main.js is going to be the JavaScript file. Notice this is not a .vue file, we're using pure JavaScript here. And this is where we're instantiating the Vue application.

So we're importing Vue, we are importing the app, and we're using router and then store, which we'll talk about later. And so what we're doing here is we're bringing in all the core dependencies necessary for a Vue application to work. And then, right here on lines 8 through 12, this is where all the magic is happening.

So what we're doing is we're saying, I want to create a new Vue instance. So I want to create a Vue application, because at the end of the day, Vue is just a JavaScript class, it's a massive JavaScript class, but that's all it is.

And it takes in a few dependencies, so we're saying, I wanna use the router, I wanna use the store, which is how we're gonna manage state for the application, and then, I want to render HTML and I want you to start with the source application.

So the same App.vue and this is a reason why you need to import it, all of this code right here is being imported and piped directly into this render process. So this is a function, it's an arrow function that gets run automatically, and we're saying, I want to mount this on the app.

So the way that this works is if you switch back into the HTML, I'm gonna pop open the JavaScript console here and I want to inspect the entire page.

Now, if you give yourself a little bit more room, I have it zoomed in so it's a little harder to see, but you can see here that we have the HTML code. And do you notice that inside of the body, we have this div that has an id of app?

That is a way that Vue knows where to place the entire application, and if you're wondering where this is coming from. If you open up the index.html, here it is, if you remember back to when we were talking about this index.html being the entry point of your application, well, this is how it works.

We're saying that we are creating this div, it has an id of app. Then, when we open up main, you can see that we're saying that we want to mount this entire Vue application on top and inside of this app id. So it's finding the index.html file, it's grabbing and selecting that app div, and then from there, it's rendering the app component inside of it.

So what I wanted to walk through in this guide was showing you from the beginning, from the entry point, all the way through how a Vue application can be processed.

Because I really think that that helps, and it helps bring a lot of clarity when you understand the source, when you understand exactly how the data communication works, then it's easier to debug and it's easier to understand how the framework works as a whole.

I know that the way that my mind works is that if I don't understand anything or it seems like there's just a lot of magic going on behind closed doors in this application, then it's really hard for me to have a mental framework for understanding how everything works, which means it's hard for me to create custom features or anything like that.

But when I understand that at the end of the day, all we're doing is we're creating a Vue instance and then we're passing in data and that's getting rendered on. It's really just JavaScript code at the end of the day, it makes it much easier to debug and to build really cool applications. So that is the role of main.js, it instantiates the application and it pulls in the core dependencies.

Then if you come down here, we have two more files. The first one is the router.js file, now the router file's pretty cool, this is where we set up all the routes for our application. So by default they gave us a home and an about route, and you can see that in order to make this work, we needed to import Vue, because once again this is not a Vue file, this is a vanilla JavaScript file. And then from there, we brought in Vue router, and then, we brought in the component.

Now, you can see and one thing you might be curious about because I know I was the first time I saw this. Is we have an about route and a home route, but we're only importing the home component. Well, that's because Vue wanted to show you there's a couple ways of doing this.

So, let's scroll down here, and the team actually gave some really helpful comments for understanding the difference between the home route and this basic import here. And what they decided to do for the about route, and hopefully it'll help you decide as you're building your own routes, which approach to take.

Because, this one up top on line three is the standard way. You may think that, if you wanted another one, like if you wanted to have, say, a dashboard route. You would say, okay I want this dashboard route, it's gonna be in views and it's going to say dashboard, and that would work perfectly fine.

You have to go and create a dashboard view component and add all of the metadata but that's all you need to do and it works. The one problem with this is that every time that this router.js files gets called, it is gonna go and it's gonna import the entire dashboard.

And that is fine in most cases, but as your application starts to get larger, then it can be nice to only call your dependencies when they're necessary. And that's exactly what is going on down here in this about component, is what the process that's happening, is it's called lazy loading.

And the comment talks about it a little bit. It say's route level code splitting, this generates a separate chunk about. and a hash and then the JavaScript file for this route which is lazy loaded when the route is visited. So if you've never heard of lazy loading, I know it can sound a little bit weird or intimidation, but all it means is that this file will not get imported until it's necessary.

So, whereas the home component is gonna get brought in right when this router.js file is called. So when main.js called the router, then it also brought in the entire home component. But, with the way the about system works, is, this is only going to get called when someone goes to the about route.

So, the whole reason for doing this is just based on performance. They have right here, perfect example for how you can import this. And this is gonna be a process we're gonna be doing quite a bit as we build out this system because there's really no reason why not to.

If you have the opportunity to perform some process only when it's necessary, that usually is going to be a much better decision as opposed to going through and pre loading all of the files up, even when they might not be used at all. So, that is what this process is doing here.

Now let's go into the last file we're gonna talk about in this guide, which is store.js. Now there's not a lot of code right here and we're not gonna get into this, but, I just wanna give you an introduction into what it is. This is using the view x library. Now, what view x does is it allows us to manage our entire application's state. So, I think the best way of understanding state, if you've never heard it before, is to understand the way that a eCommerce site works.

So, let's go to a eCommerce site right now. So, if I go to say, get quip, which is actually an application that I built several years ago. So if I go to get quip here and I go to the shop, then, what I can do is I can go and I can purchase something from the shop and I can add it to the cart.

Now, as you can see right here, it is showing that I have a subtotal of 45 dollars, these next refills and I could check out or I could shop more. Well, shopping more means I'm going throughout this application, so I'm going to visit different pages, just like that, I added another cart item. So, I can click shop more and I can navigate from page to page.

But do you notice how it still says that I have two items up here, in my cart. Well, how can it keep track of that? Well, that is how state works. And, what state allows you to do is to maintain persistence as you go from page to page, from component to component and you can pass data and have access to data.

So in other words, when I click on this add to cart button here, what I'm doing is, I'm telling the application that I want to add another product to the state and then when I go to check out, even though that may be ten pages away, the system is gonna know all the items that I had in my cart because it was all loaded up inside of the application's state.

And so what vuex does, is it allows us to create state and to be able to access it. Both to add items to the state and to call them when needed. And so we're gonna have an entire section on understanding how vuex words and hopefully that'll help you.

I will tell you, I'll give you a warning, this is probably the most confusing part of this entire course, is going to be how to work with state and vuex and different tools like that. And so I'm gonna make sure that we spend plenty of time going through it so that you have plenty of examples and it makes sense to you by the end of it.

So in review, in this guide we went through some of the main components that make up the foundational structure of a Vue application. Such as the app component, the main.js, the router and the store, and we're gonna finish up this section by going through a few of the configuration files here that are located at the root of the project.