Laravel Routing & Vue Routing

Victor Gonzalez
A free video tutorial from Victor Gonzalez
Senior Web Developer
4.5 instructor rating • 2 courses • 3,834 students

Lecture description

Our application will need a combination of Laravel route and Vue Router. Let's get it all setup.

In this episode, we cover:

  • Laravel Routing

  • Vue Router

  • Front-end Setup Complete

  • Vue Components

Learn more from the full course

Laravel API Development & Vue JS SPA from Scratch

Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

05:38:27 of on-demand video • Updated July 2019

  • RESTful API Development with Laravel
  • Vue JS Single Page Application Methodology
  • Front-End Design Using Tailwind CSS
  • Implementing Search Functionality Using Laravel Scout
  • Build a Complete SPA from Scratch
English [Auto] As I mentioned before we're going to let the view router package actually handle routing for our application. However keep in mind that level is still going to handle the initial authentication so those routes still need to work. So let's jump right into the web that BHP file and let's clean this up a little bit so we can get rid of just about everything here except this authentication rules and then this one singular route. However right now it is a hardcoded slash home. We want it to match everything else. Now in though of course you can use a variable such as any. And then we're gonna hit some sort of controller we'll handle that in just a second and then we don't need a name root. What we really need is to actually match everything and to do that we could use a regular expression so we can say all right the variable any meaning anything that comes after the initial slash it needs to match the following regular expression. And it's gonna be a period meaning any character at all and then an asterix again in regular expression. This just simply means zero or more times. So match anything zero or more times. Basically everything no matter what character it is it is going to be matched and sent over into the home controller. Now the home controller to be honest doesn't make a lot of sense that it's called Home controller. What it really is it is the app controller. So what do we rename the home controller that ships with lava into app controller. So let's find that now. It's inside app HDP controllers. And here it is. So let's go ahead and rename this to app controller instead. And then we'll go ahead and rename the class. So notice it renamed it right here for us. Great. In our constructor we are of course requiring authentication and we will need this. However right now we don't really have a way to register user and sign in and sign out. As a matter of fact we stripped out the entire front end of level so right now it wouldn't even really look right. So we'll go ahead and comment this line out just for the time being. We'll get back to this and we'll turn it back on when we are ready. Now this all it does is it hits an index method and then just returns a view of home. So let's go ahead and visit that home that blade that BHP file and we have all of this code right here. Now to be honest we don't need any of it. We can actually get rid of the entire block. All we really care about is the fact that it is extending a layout and then we have some sort of content area. So in here I'm going to have a new view component which is going to be app appropriately named because of course our entire app will run off of this one view component but so far we haven't even installed all of our dependencies. If you look through here and look inside the node modules there's only a handful of modules in here. We have not installed the entire package that Jason File. So to do that let's go ahead and run npm install. Now this process can take a couple of minutes. So let's jump back and just keep working on our code. OK. So back into our home that blade that BHP file we are requiring this app component but it doesn't exist yet. So let's go ahead and make that happen in the resource directory inside J.S. inside the components directory. Let's go ahead and create a new view component called app and then inside of app for now I will just say hello. Just so that we know we are in fact loading that app that view file. But of course it doesn't work unless we actually registering. However this app that J.S. file. Well it's really setup for the way level does things. We're going to have to do some heavy modifications to it. So let's start off by deleting all of these comments and we actually are not going to load view into the whole entire window so we can get rid of that line. This example component of course is going to go. We're not going to need that and for now we will leave this view app. But of course some modification of this as well is required. So right now view doesn't exist. So let's go ahead an import view from view. OK. So view is available to us because of course the installation finished in the background so we can head back and continue working. So the next thing I know I need is this view router. However if we put all of our roots inside this one app that J.S. file then it would get very very cluttered. So what do we make a dedicated router file instead. So let's create a new JavaScript file called router that J.S. and inside of here. This is where we're gonna put all of our roots that way very similar to the way we have the Web that BHP in level application will have this router that J.S. meaning this is where all of the routes are going to live. So let's go ahead and import that router file into our app that J. So we'll say import router from and this is gonna be right in the root directory just router that J. Yes OK. So let's take care of this router right now. So first and foremost we're going to need view. So let's go ahead and import view and then we're going to need the view router of course. So import view router from view dash router. There we go. Great. So the next thing we need to do of course the view router is a plug in. So in view to use a plug in we use that exact same keyboard. So we'll say view dot use and then what are we gonna use we're gonna use the view router. Great. And that's it at this point we can actually just export default New View router and this is a very basic view router at this point. So it's ready to accept routes. So we're gonna have some sort of route object and then just for simplicity's sake if you're not familiar with view router view router has a backwards compatibility mode that will actually allow view router to work in older browsers. However it adds a hash or a pound in front of every single address. So it's really not designed it doesn't look as good. So to turn that off you're gonna say that the mode is gonna be history this will turn off that feature. Now this does turn off some backwards compatibility. So if you're still trying to meet older browser standards this mode should not be used. However for most modern applications that are gonna be FCPA. This may even become the standard. So the mode of history. Just so you know as a back story it actually uses push states and push states is just not available in older browsers so it just wouldn't work. OK so why don't we add the very first route so this will actually need to be inside an array and then we're gonna have a new object in here and it's going to say for example path and that's gonna be the path that we're going to visit. And then it also needs to have a component that we're going to load right. So let's go ahead and pull up component. And right now we don't have any components but level does ship with this example component that view file so when we use that we'll say example component. Now notice that BHP storm automatically imported that up here at the top. So we have example component and we're just using it and the path let's just put a slash meaning just a regular home page as a home page. We're gonna load this example component in our browser. OK so so far so good we're almost done. Now back in the app that J.S. file yes we are importing this router but we're not using it anywhere inside this application. So let's go ahead and pass that into our instance of view. Okay. So I think we are ready. So what we need to do now is go ahead and compile our code so we'll say NPM run and let's go ahead and put up the watch. That way it continues to do the watching force. Now this is the very first time that we do it. So level mix is gonna need to do a little bit of homework to make it work. So let's let it do its thing and we'll be right back. And there we go. We are good to go. So let's go ahead and pull up the browser and visit our project so we have our project pulled up but we must have gotten an error because I don't see that example component. So whenever something like this happens with the javascript of course the best way to do this is to use the console just to see what sort of errors get sent back to us. So to access the console you can right click and then click on inspect and then we can browse over to the tab that says console. And so we get a view warning. Unknown custom element app. Did you register that component correctly. We must have forgotten to do that. So let's go ahead and go back to PSP storm go into app that jazz. And sure enough we are not telling our view instance about this app view component. So let's do that now. Let's add a new section here for components and then instead of here we'll go ahead and use the app component. And of course we'll have to import that at the top. So we'll say import app from components slash app. OK. So now the watcher that's running behind the scenes will recompile our code. We can head back to Chrome hit refresh. And there we go. So now we are loading Hello. So remember Hello. As in each one of course is what's coming out from our app view right now. So so far we actually haven't loaded this route just yet because we don't see the example component just yet. And the reason for that is because inside this app there's nowhere where we're actually telling it to go ahead and display any of the components that the router loaded. So to do that let's go ahead and wrap this whole thing inside a div that will have that hello just yet. But then of course we have the router view router view is a special component that gets added to your project automatically whenever you're using the view router. So hit safe. We'll let the compiler do its thing. Let's head back to refresh and sure enough example component now loads up. However if we go to slash log in we still are able to pull up the log in page for Lenovo. So that's how the project is going to work. We're still going to have the authentication routes but everything else will still get routed through our view router instance.