Laravel API Development & Vue JS SPA [COURSE]

Laravel API Development & Vue JS SPA – e02 – Vue Router

welcome to level API development with view Jas single page application from scratch the following episode is going to be an

excerpt from the full course now available on udemy if you are interested in developing robust laravel api's with a front-end built on view and tailed when CSS then this is

the course for you we go into great detail talking about things like authentication testing tailwind CSS view j/s levo PHP unit and so much more so I hope you'll join me for the full course

go ahead and click on the link in the description to get sent to the udemy page where you can purchase the full course I hope you enjoy this episode as I mentioned before we're gonna let the

view router package actually handle routing for our application however keep in mind that levo is still going to handle the initial authentication so those routes still need to work so let's

jump right into the web that PHP file and let's clean this up a little bit so we can get rid of just about everything here except this authentication route and then this one singular route however

right now it is a hard-coded slash home we want it to match everything else now in laravel 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 route what we really need is to actually match everything and to do that we could use a regular expression so we can say

alright the variable any meaning anything that comes after the initial slash it needs to match the following regular expression and it's going to be a period meaning any character at all

and then an asterisk 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

why don't we rename the home controller that ships with laravel into appcontroller so let's find it now it's inside app HTTP 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 a user and sign-in and sign-out as a matter of fact we stripped out the entire front end of laravel 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 PHP 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 gonna have a new view component which is

gonna 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 JSON 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 okay so back into our home that blade that PHP 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 register it however this app that jas file well it's

really set up for the way layer of all dustings we're gonna have to do some heavy modifications to it so let's start off by deleting all of these com 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 it's 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 and import view from view okay 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 routes inside this

one app dot J's file then it would get very very cluttered so why don't we make a dedicated router file instead so let's create a new JavaScript file called router AAS and inside of here this is

where we're going to put all of our routes that way very similar to the way we have the web that PHP in the level application will have this router dot 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 Jas so we'll say import router from and this is going to be right in the root directory just router dot J yes

okay 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 an import view and then we're gonna need the view router of course so import view

router from view – router there we go great so the next thing we need to do of course the view router is a plugin so in view to use a plugin we use that exact same keyboard so we'll save you dot use

and then what are we going to use we're going to 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 sake if you're not familiar with view router view router has a backwards

compatibility mode that will actually allow your 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

desired it doesn't look as good so to turn that off you're gonna say that the mode is gonna be history and 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 going to be s.p.a 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 okay 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 gonna say for example path and that's going to be the path that we're going to visit

and then it also needs to have a component that we're gonna 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 will say example component now notice that phpstorm 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 homepage as a homepage we're gonna load this example component in our browser okay so so far so good we're almost done

now back in the app dot JS 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 layer of a 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 council 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 the component correctly we must have

forgotten to do that so let's go ahead and go back to phpstorm go into app that j/s 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 inside 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 / 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 an h1 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 no 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 then we'll 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 we'll hit save we'll let the compiler do its thing let's head back to Chrome hit refresh and sure enough example component now loads up

however if we go to slash login we still are able to pull up the login page for laravel so that's how the project is going to work we're still gonna have the authentication routes but everything

else will still get routed through our view router instance

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

Buy the full course at https://www.udemy.com/laravel-api-development-vue-js-spa-from-scratch/

In this episode, we cover:

Laravel Routing

Vue Router

Front-end Setup Complete

Vue Components

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

What you’ll learn
– 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