But for the frontend, it'll be a single-page application, and that'll ensure that when we click on these links, they will load as quickly as possible without requiring a full postback to the server. Okay, let's get started. Now like I said, there's going to be a Laravel backend here, but mostly for convenience and familiarity. So we'll call it assets. And if I cd in there, do note we have a Laravel 5.8 installation. Okay, next we'll install all of the default NPM dependencies, and then load this in Sublime. Now if you take a look at package.json, we are going to be using Vue, but to make this

Okay, next we'll install all of the default NPM dependencies, and then load this in Sublime. Now if you take a look at package.json, we are going to be using Vue, but to make this a full SPA, I also want to pull in Vue Router. So you can take a look at the documentation here if you want, or just come along for the ride. Now you'll see for installation, we can pull it in through NPM, and then we need to register it as a Vue plugin. So we'll pull that in. And then if we switch back to Sublime, let's go into our resources/js/app.js directory. And I think mostly we're going to start from scratch.

And then if we switch back to Sublime, let's go into our resources/js/app.js directory. And I think mostly we're going to start from scratch. Okay, so let's import Vue. I'm also going to import VueRouter. And then I need to add it as a plugin. Okay, next on our main top level Vue instance, we're going to add a router here. And here I can instantiate a new instance of VueRouter. And yeah, we need to give it some list of routes. So we'll need to generate that. Maybe we can import that.

So we'll need to generate that. Maybe we can import that. Import routes from routes. Okay, this makes sense. We're pulling in Vue. We are creating a top level Vue instance, and we're binding it to the element with an ID of app. Next we pull in Vue Router. We register that as a Vue plugin. And then if we're building an SVA, we need some declaration of routes to respond to.

We register that as a Vue plugin. And then if we're building an SVA, we need some declaration of routes to respond to. So we're going to instantiate that, but yeah, I need to create that, routes.js. And here I will export an object of routes. So we'll set the mode to history. So this will be how you want to record each new page change. Do you want to use a hash in the URL, or do you want to use the HTML5 history API? This is most common, but you can do both. Next we need our list of routes here. So for each one, we'll have an object where, much like Laravel routing, what is the path

Next we need our list of routes here. So for each one, we'll have an object where, much like Laravel routing, what is the path we are listening to? Let's do the home page first, and what is the component that should be loaded for the home page? We'll call it Home. Finally, again like Laravel, if you want this to be a named route, you can. Otherwise, let's do another one. So we're going to have a home route, and I'll do one called about. We're not going to keep this, but just to show you the basic setup.

So we're going to have a home route, and I'll do one called about. We're not going to keep this, but just to show you the basic setup. If you have a home page and an about page, and you want to click between those without doing a full reload from the server, this lesson will get you up and running. Okay. Now, you'll notice we have a home and about component, but those don't yet exist. So we'll put them here. Some people create a views directory, anything you want really. So in fact, we'll just rename this guy to home.view, like so, and then we'll copy that and make another one called about.view and paste that in.

So in fact, we'll just rename this guy to home.view, like so, and then we'll copy that and make another one called about.view and paste that in. Okay, great. So think of these as your V-I-E-W, your view-specific components. One for home, one for about. But now, if we're referencing those, we of course need to import them. So import home from components/home, and then another one for about. And then we say, when the user gets the home page, I want to load that home component. Or when they visit the about page, let's load the about component. Great.

Or when they visit the about page, let's load the about component. Great. So we have our routes, we have pulled those in, and then we pass them to a new instance of view-router. Okay, so at this point, we could set up a kind of a master app component, or we can do it direct. I'll show you the direct option for now. So here's the welcome page that is loaded, and if we scroll down, yeah, let's clear all of that. And instead load our div with an id of app.

of that. And instead load our div with an id of app. Let's clear all of that out. There we go. Okay. Finally, I will import our compiled app.js file. And with that in mind, we need to make sure we boot up our watcher, npm run watch. So we get an error, can't resolve routes. Hmm, let's see. Did I not save this in the right place?

Hmm, let's see. Did I not save this in the right place? And oh, whoops, no. Okay, real quick, let's move routes to the resources/js directory. Okay, now it compiles. So now within here, because we pulled in vue-router, to start we can use this new element, router-view. And we'll paste it right there. Okay, let's take a look in Chrome. So if we switch over, sure enough, we get home. So notice right there where we have router-view, it matched that we're on the home page, so

So if we switch over, sure enough, we get home. So notice right there where we have router-view, it matched that we're on the home page, so it loaded the Home component, and it spits out a paragraph tag. And again, you'll see that right here. Let's now see if it can load the about page. But if we did this, it's going to fail, and you would expect that, right? If we go to our routes/web.php file, at the moment we're only responding to the home page. So if we're making an SPA, it sounds like we need to say, well, on the Laravel route sends, responds to anything at all. We're going to let our JavaScript layer handle the actual routing.

But nonetheless, we have home and about. Okay, so now I want to link between the two. All right, we can use a router-link for that. So right down here, we'll have a router-link to the about page, and then another one to the home page. Again, these are available to us because we pulled in vue-router, and then we added this section here. Okay, let's come back, load the home page again, and now we have two links. So notice if I click on the about page, the URL updates, and the active section does as well.

So notice if I click on the about page, the URL updates, and the active section does as well. Of course, the important thing is we did not reload the page. Only this section changes. So again, I can go back and forth, and at no point do we reload from the server. Great, and that's all it took. So router-view, think of this as where will all of these components, where will they be inserted? Think of it as the equivalent to yield for Laravel. Where will we yield the contents?

Think of it as the equivalent to yield for Laravel. Where will we yield the contents? Right here. Next, how will we link to all of these pages? Well, you can't do a standard anchor tag because there is a default action there to reload the page. So instead, we use the router-link component. Now here, again, we're hard-coding the URLs. I think it's totally fine in this case, but if you like, you can use named routes. You could say name is about.

I think it's totally fine in this case, but if you like, you can use named routes. You could say name is about. Okay, so take a look at this. If we try it now, go to console, go to the about page, notice it linked, it tried to link to that full hash there. Don't forget, always use data binding there. So it's interpreted as an object. Okay, refresh. Now if I go to the about page, you'll see, well, there is no route with that name. Of course not.

Now if I go to the about page, you'll see, well, there is no route with that named. Of course not. We want a named route, but we haven't named it. All right, we'll go right here and we'll say the name is about. Okay, so now it would work. Refresh. I go to the about page, we get the same thing. So that's entirely up to you. In this case, we're not building anything very large. I don't see a huge benefit to using a named route.

This is just a simple explanation with no code.