I'm going to come up here and let's, actually, let me take one more step. One thing that I personally do and you do not have to do this, but just to give you a little insight.

Whenever I'm building out my own Vue apps I don't usually run the server inside of V.S. Code, mainly because I like to have as much room as possible in my window for the code itself.

What I do is I go into the terminal application and then I'll run it from in there. Inside of my directory, I'll run npm run dev and then this will start running, but the difference is now it's going to be only here in the terminal and then I can just close it out in V.S. Code just to give me a little more room.

Now, with all of that running, I'm going to open up the folder demo-vue-app, Open it up and now you're going to be able to see all of the code that we have access to. Now I'm going to start at the index.html file.

The reason why I'm starting here is that technically, any kind of Vue application that has a dedicated standalone app is going to start inside of this file right here. Even though it doesn't really look like a lot is going on right here, we only have a title and then we have a body with a div app.

It doesn't look like a lot, but actually, every single piece of code that we're going to write is going to get injected like it says right here on line 10 directly here.

That is something that is very important to keep in mind if you're not very experienced with single page applications, it's important to have an idea for the way that they work. If you're working with some other kind of application, and I'll just kind of take a little bit of a detour here to show you a Rails application.

So this is Daily Smarty and I built this using Ruby on Rails. It is not a single page application, if I click on one of the links and go to this page, this is a server-side application. This means that all of the data here is brought in from a database and each anytime I click on something, it's going to render a completely different HTML component and page.

Now where this is so much different than with, say, a Vue application or a React application is that in React, Vue, or any of these front-end frameworks, you actually only ever load a single HTML file. So the only page that is ever going to be seen from the client's perspective, and when I say the client, I'm talking about the browser.

Everything that is ever going to be seen is going to be injected automatically. Let's walk through that process now and let's also make sure that we have this open. So yes we're here on localhost:8080 and you can see everything that is loading up.

Now, this may be a little bit surprising because you see that you have this image and then you have this heading and you have these links, but if you look at the index file none of that is there. Let's try to traverse this tree and see exactly how all of this work.

So if I go into src and I go to main.js, this is really where the initial logic and where the booting process occurs in Vue or in one of these types of apps. So right here you can see it's importing Vue from the Vue library then it's importing app.

This is something that was automatically generated. You don't technically need this so you could swap it out for anything else you want but the CLI generated the name for the app and so this is kind of like our root component. This is a component that everything else is going to be nested inside of.

Then it also imported the router, and the router is what's going to allow us to integrate routes pretty easily into our application, but instead of being like the way the daily smartie app was, where you have to click and then it renders a completely different HTML file.

You may also notice when you click something that the entire page reloads you see the little circle up there working. That means that it contacted the server and the entire page was reloaded.

The way that Vue works is when you click on a link, it looks like you've been taken to a different page at least from what you can see, but from what the browser sees you're still on that same index.html file.

Vue is simply removing one component and then it's showing you another one. That is one of the most important, foundational concepts to have in mind whenever you're working with Vue or React or any of those kinds of frameworks.

Now, if you followed along in the last guide then this may look a little bit familiar to you. You can see that we're creating a new Vue instance here.

We're creating a component and we're grabbing the element, with the same app ID that was in the index.html file. We're also passing in a few other things like the router and the list of components that are included and then the template.

Now a few of these items are different than what we covered in the last guide because they are really just used whenever you're building a standalone Vue application. When you're building this app out you should not typically have to touch this code very often.

It is giving you a default that you won't have to change, instead, you'll be working with the router and the app component.

Now that we have that in mind, we're still trying to see where the content is, so far we've looked at two key files but we don't see the words "Welcome to your Vue JSA app", and we also don't see that image yet. So let's keep on moving up the tree.

We know that we've imported the app so I think that would be the next logical place to go look. I'm going to our app.vue file, and now we're getting a little bit closer.

You can see now that we have an image tag up here and this has a call to "./assets/logo.png. Now if you look in the source file and the source directory and you click on assets you can see that we have that logo in the project. That's something that they gave us by default.

Now let's try our very first real code change here and let's actually swap this logo out and see if that works. So I'm going to open up and let's see how we can add a file in here. So I'm going to say open containing folder here. And depending on your operating system this may interact a little bit differently for you but it's going to be similar.

Now I'm going to open up another window here and go to the desktop and I'm going to eventually save a file right here. So let's switch into google chrome and let's grab a logo from Daily Smarty. I can just drag it in.

Now switch back to Visual Studio code, and let's bring it in.

We were able to add a file directly into the asset pipeline and then Vue automatically picked up on it and then it allowed us to call it from within the app.

So far we have made it to the main route app component and in the next guide we're going to keep on going and we're going to see how we can manipulate the content in the browser.

Resources

Daily Smarty