Laravel Vue js set-up with Vue.js router & components | Very important tutorial for this series | 01

[Music] you hello everyone I'm Beca gay and today I'm going to start the first video of the level and beautiful stock development series and this video is really really important for everyone mostly the beginner so you have to understand the basic setup of laravel and VJs so yeah you have to stake and have to watch all the till the end of this video because this if you do not understand how this all setup works then it's going to be really hard for you because coding is much easier then they setup so you have to stick and watch still till to begin okay so let's get started so for who uses are used Mac then can use valid and if use Windows for installation laravel you can use Lara Geun which is really one of the cool software available for installing lot of them and starting the level project quickly so yeah you can download laravel Lara can actually so you can if you are using in Windows you can use our this large on software and if you are using Mac I suggest you use bullet okay so let's get started and I will install a fresh laravel laravel new let's call it through stock okay so yeah this is not the directory so I have to install it in the larval folder and just for good I had a set up inside here so I have to run the come on here it will take some time to download okay that's awesome and let's see what we have and full stock we have the project install here okay laravel itself is great framework and it has a lot of features and a lot of codes we are not going to learn all those but I'm I will be focusing all the things that you really need to know in order to develop any implication because you don't need to know everything to start so yeah let's get started so mostly you will be working with under app folder and here you see console exception HTTP provider so you can forget this console exception and provider so all you need this HTTP folders and then you need this external files these are called models and you need are we will need middleware we will have build a custom middleware but it's not so early we will develop it later and most of the time you will be working under controller folder okay so all you need here is app and then under HTTP and then you need to work with models and model loops just under the app folder okay and then we will require these routes and we will we have three routes API for API development but we will require only web dot PHP file we have a basic route setup here I will explain what this route mean and how the novel works altogether perfect so and then we have another folder which is a resources and we will have view so we will need a walk this folder so and then we will work under Jess okay so most of our code will be living under Jess and then there is some code under view that's all that all you need okay so now let's see and let's run our project and our project name was full stock and then I have to add localhost okay so you see the project has been run and I can see the first page of the Lara that now let me show you how all these works all together okay now say laravel is a MVC framework let's see how it handles a user request and server surf the punt and the I'm in the HTML okay so when user visit the test when a user visits a tester localhost in our case it's a full started localhost and then visit any page what it does it downloads the web Wi-Fi the match okay so yeah and then if if it cannot find any match they need two returns for to go for so let's say we we run something which doesn't exist it says 4 0 4 because in here we have made this initial route we don't have any other than other than this ok so that is why it is showing us let's say we have a test page for out here instead of that things and if we run this test page we will see this one but let's say we don't we don't have any route but we try to pull it it will give our for two to four that are perfect so yeah let's see if a match found then we then call a controller class another method normally you just we just return from here but in normal cases we will positive equals to the controller and a method I will let me let me show you how this all works together so yeah you have to create a controller and to create a controller under a HTTP and controller we have to write this thing command PHP irritation make controller let's say test controller perfect so we have a controller created chess controller so here you mean we then call a controller controller is a class obviously and then a method of it so yeah normally you will be calling like let's have a round here okay this is this is one way of cutting a route and just returning with a closer function this is a closer function and it's just returning but we can have a route like this new routes and then we will call the controller class that is what it was written there and then it says okay controller class call a controller class and then a method of it okay then we have to call our methods first we have to call the class and then we have to call a method okay so name okay we can name it as a controller method that's all and let's say we have to define it here as public function and then you saw we have returned from here but we will we can return the same thing from here as well so if you call this named route now okay test controller an invalid route exception it okay let's see what I get X unexpected build exception okay sorry this is no this is not how it works I have just messed it up with no J's project so I was doing no just development of while ago so it's stuck on my brain okay that says how you actually call a method not a dot you'd have to write ad at the right sign so yeah for you need to call the class name and then a method of it so that is then this code will be executed perfect so if the match is found obviously the match has been found that we then call a controller yes it's a class and then we call a method you saw it right so that's it and then yeah the controller then returned a V it can return a view it can be a blade file and the serve as a content so you see it returned V then welcome and what does actually mean it means that it will go under resource folder and it will go under view folder and you see the name is welcome at blade dot PHP you can ignore this blade dot PHP fine blade dot PHP part and just concerns it when one welcome name okay so this name has to match welcome and if we change that name you will get an error because there is no use exist with that name so here we will get an error exactly we got in our okay perfect so yeah I hope you now know how this normal this is a very a very basic normal novel setup and you know the laravel this is how it works your request first come to the web that PHP file it tried to find a match against the URL you send and if it doesn't it will return for three or four euros and if it does it can return right like this or you can call a controller like this and you can write your custom code here you can write anything any code here actually it will be any code like that any code here and then after you can send some data with it as well okay I will show you each and everything as we go ahead and yeah this video will be longer because I decided to make it a little bit longer and complete the whole setup instead of making part by part it's actually a little bit annoying I don't know for you guys but it it is little bit annoying for me so I'm trying to cover almost everything in this video okay that's great now you have seen how the normal basic level setup works now we will see okay if we add villages into it how this works okay now let me install the beaches first because we don't have a beaches and normally default install if you still see the package so just soon we will see we have the next year's wearable mix and those dependencies HIV installed and then we have a running script here written so yeah you have to install our we have to install our view just so let's call NPM for NPM install first so that it install all the existing dependencies perfect it installed everything now we will install buges okay and prim install video so here's the main concept comes in because you would seem something really easy you see the dependency the view has been installed here so that's perfect and this is not so much big team to understand because it's simple now if I open our welcome dot link dot PHP file you see the default things here so we can simply remove this style from here and we can also remove the internal body stuff here that also that is also fine and we can remove this phone section as well we can save all started out now here we don't have controller method return will come and we don't have actually anything in the body that's why we are seeing empty so let's make an h1 tag this is the body perfect so the Welcome plate is running now let's see how we can integrate video into it so here now let's check let's check out when we add a VG's in laravel how it works from user requests reserving content so when user visit our page that's it's again a test page so it will try to load web the PHP file as as before and trying to find a match and it called if a match is found in call some method of a controller which is perfect and exactly the same as before and in and then here we normally what we do is we'd normally just return the data okay as a JSON that that's all we do okay we don't do much things here so for example if we have view installed and it matches so instead of returning a like this we will return something like this return response the Sun so you have to understand it when to return what so let's say message is we should return only JSON okay now instead of returning a blade file we just return a JSON data okay so in that case we will always return that just some data okay perfect if mate is found because you see this is a drug name is new and if we see we have a match here so we call them we call the controller's method here and then we return a JSON data perfect this line this is the flow and in case if the match is not found let's say you have we have written anything here instead of new we'd written anything clearly get an error I mean for 304 because nothing has matched so if no match found in order to avoid showing 4:04 we will actually send our welcome blade in this case okay so little bit different from the first setup so yeah it then uses power out which is known as inner out on any route in level so let's see how spiral actually works okay so let me show you so here let's say it the match is not there there may be in here we have hundreds of routes and no match found so that means we are showing we are telling our lot of all that okay don't give me any data just give me the beam page or be whatever related to you okay so this is how we write any route route any and you can actually pass anything as a slug and then you can simply call a function like this or you can call something like that it's completely up to you okay then you can just simply return this one okay so whatever you right now it will always return this one okay so this is the key you have to understand these things no matter what you pass if it doesn't match it will always return you're welcome yeah it's a little bit insecure right now you have to make this log the way you want right now it accepted everything if you want to accept special character you will right we're conditioned and you will do some fragments so that you can make it secure but I'm not doing great right now you will be able to find a lot of sample code out there okay perfect so what if no match is found we just use this any route and then what we do let's see okay any route then call a controllers method so yeah here I did not call a controller method but I can call a controller method here and pass something here and then return the view same thing yeah I received the method returns of view so this is the view and in that in our case it's welcome to blade that fish be fine so yeah I hope you understand it right now and this is one of the most important part you have to understand because now we have returned welcome totally this is the welcome to blades of PHP fine and we have to load our view - right on that page to work for us okay in welcome to glib dot php' fine we then load buges component and this view component didn't load be wrote ours and then this view router actually tries to find a mate again for a test route be rotor than load of the component so that is how it works from start to in now let me show you all the process here okay I showed you any note and then the method returns of view perfect we shall I showed up to that part now we will see this four part okay and I will show you how this four part was so you have to remember if you don't remember it we will get stuck so you can take screenshot of this screen I have prepared it and let's see how it will works together okay the method returns a view in our case become the place without PHP files so perfect here now we have to load beauties in in this file okay so it says in welcome dot B of oblate dot PHP file we then load various component now let's see how we can load the be just fine okay let's start from here okay let me and let me show you another presentation okay you say view entry point in la release resources chase after just okay so you mean we have to understand the entry point for vue.js okay so the entry point start from resources days and ab gorgeous here our into porn starts okay so we have to first load the view here so let's load the view here because it's currently loading this post refine which is this one and this one engines telling in low - library for easy VG not religious just JavaScript functions you can use lot of cool function using Moodle - and then here you can have the Nexus and that's the simple stuff okay that's your useful okay now let's load the be just fine here window dot view and then we will require actually view here and then we need to use the view actually here the element will be the one we will be using so we will pass an ID okay let me go back in and the idea is you can have anything so everyone write as app so let's do it as an app and give an ID as app so that one is well now whatever you write inside this Dave will be beaches will be able to hand execute its code if you read anything outside of this tape these pages will not be able to control that okay now that's perfect for now we have to load a component first okay so that is what it says okay it says the view into frame JSF Duchess file so this is the entry point and then you hear you say you sure you saw that we have to load our biggest component okay so first of all before loading our biggest component we have to define averages component right so if we do if we do not define a VJs component how can we use that actually right so let's go ahead and create a component so how do we create a component actually a component just as we just fine that's all if you do not know what is a component just forget it I will show you so let's make a new folder under J's folder components dot view that's perfect and then we can have a name may not be so the this is our component okay main F dot view is a component now let's see how you write it you have to write template first and I wrote div that's all and this is the component okay this is the first component perfect now we need to we have created a component now we need to add that component in our entry point go ahead because this is where everything will be loaded so just import that and you can give a name to the component it can be anything so let's call it just manor it's much easier for us to remember and we will require the component and component location is under component folder sorry it should not be a view it just a folder so component and then our component name is main app Tobi and it will be the default component and let me know how to write this take hold yeah that's perfect okay now we have the component written now let's load this component as it's written here in welcome Douglas dot PHP fine we then load a Vinge's component and in that case our component is maintenance so let's load it here and you have to load it inside and inside your definition so here in the case it is a perfect now it's loaded so what it will happen if you write anything and if it met here it will just return data it will return well comes on blade that PHP file and it will actually load this component okay so here your that is why we have slack here if the routes does not return any data then it must return the beam of view files so how will order be fine we loaded view file under this welcome dogleg dot PHP file ok it works as an indexed or HTML file the main our interview loader point perfect so yeah we we cannot get the result right now because we have to run a command so we have to run we have to watch the changes so npm run watch and it will not work either okay let me show you what it will not work let's complete this flow so in order to complete this flow we have to know this third flow as well so this is the entry point and it loads the V route stores everything related to view obviously I have not shown you the B router view works and everything but this is right now it's completely useless because you will not have anything because this file is completely useless okay even whatever I have written here is useless because the application doesn't know what this template means what this main actor do you mean we have to compile it ok we have to compile everything whatever have in return in emojis that may never be everything okay whatever the be just don't you find me right we have to convert it to plain JavaScript code okay so let's see how this all these things works so this flow is right now we cannot go ahead with this flow so what we have to do we have to know see how all of our view file works and how we code becomes available in our project okay right now BJ's project is not available at all if I simply run this project we will see nothing and get might get errors you see we get nothing here because it's not working clearly it's not working so how we can make the bridges code working so first in Japan is this one Abdo just when we worked on it and it loads of view routes everything okay it loaded but it's not available in WordPress okay all those being files are just useless but with webpack dot mixed or just fine it becomes useful now here interesting part is that we get a web page that mixed up just fine now let's see how what this web pack mixed or just fine with us okay so here is a web page Smith web picnics dot just file and you can see something in some instruction if you want to more just go to deliver the website and write larval mix our web techniques you will get a lot of information here you see it's saying let me just explain in plain words to you so that you understand it much better so it says JavaScript go to resourceful there okay I'm going to miss which folder and then you saying go to just J's folder okay I'm going just folder and then go it's a go to F dot just fine okay I'm here okay and then it says take all those codes and put them inside a public folder and J's further okay and by default it will name as approaches so what it's saying it's saying take all the code view code resources yes Abdo J's and put that under public yes and Abdur just fine okay so that is where the Abdo just fine has been put now if I show you if I delete this file let's say I delete it okay we don't have any public in J's folder in under public okay simply public then no just file nothing okay now let's see or web pack whatever web pack says what Pig says we can remove that one no it doesn't matter says take all the files code from resources just upload this file to a new folder public J's folder okay that's perfect and that is why I said everything is useless in here but we use using webpack we take all those buccal V code and then we compile them and make it plain JavaScript code and that is the whole project let's see so but with the web pack being touch this file it become useful and you really have to understand it so web pack that means to just file take all the view code from resources there's AB dot J's file and compile all the code into a new file called AB dodges and the publishers have to just fine but this happened only when you run NPM commands such as NPM run watch or dev or production so let's run a command okay and I heard I did run that command that is why it was available so if I show you here it did here we don't have any JavaScript folder J's folder or AB dot J's file nothing and in under public if we're on NPM run watch or dev or production as in the file I showed you what did we do it will create a folder here and then AB go just fine let's see it life you see just finest available and then AB do just buy it perfect so NPM run what if you run in cream run watch it this code will be in development mode but if you run it npm just for npm run production it will be a production mode ok so it will be like compressed and yeah it will be minified and everything that record for the production will be available here so you see even if you delete this one it will come back again you understand perfect so what I let me recap once again is that whatever we have written under resources yes and component blah blah blah you can have lots of components file here okay all of them are just useless for the time being so if you write a lot of codes here this code will have to be compiled to plain JavaScript code okay browser understand this plain J's code okay browser do not understand what you have written here it doesn't understand template it doesn't understand scrape the world of whatever you write here it doesn't eat that doesn't understand anything okay so it does only understand this plain JavaScript code okay so now since we have a plain JavaScript code available let's see what we have to do next all right now this newly generated Abdo just fine from public just folder it's that whole view projects perfect so this is the this javascript file is actually everything whatever you have written as a view code will have to be compiled to the plain JavaScript code and that is your project okay and you can delete everything else and keep this one after just one and it will work okay even if you upload your project into a server and if we do not upload your resources folder at all if you do not if you simply delete this resources folder after running and p.m. run watch or Dever production you will get a new code inside Abdo JS file that will be alone everything and you do not have to upload anything here because this code is not readable by the browser so yeah it doesn't have any effect but you do need this file folder to make new a code or you may need to write a write new code for your project okay without them your project will be going ok so you have to keep that file as well okay now this is why we have to lean this public just Abdo just fine in our welcome dot play dot PHP file to load the whole being project so you go to the point now so in order to load view component or V route or whatever we have here we have to load the JavaScript file that is known as the whole view project and inside a view project we have the view component so in order to load the V component here in order to load the V component here we have to load this fine ok we have to load the view project so what is the view project the view project is simply this file okay so let's load the view project so here you go and we just load the view project fine script note this script actually and then we write the source of it yes or it can be written in many ways one of the cool way is using mix because it can have a version I'll show you the version number so where your file lives your file lives under public folder by default if you write slash it'll go under public than this then your apt or just fine okay this fight so this file has been linked now perfect now if I see the console here and yes and if you load this file let me check that out okay so my check was strong sorry for that sometime it happens perfect this is the first component congratulation we was able to load the real component and view jiz into our whole projects okay so let's delete these things again and reload and you see AB dot J's fine okay that's awesome perfect you see this is the view project okay this is your blue project perfect so we have loaded this Mew project then it will definitely load the view component and it will okay now the V component is loaded right now we have to show you let's complete this step and after that the video we int okay we have to go up to this part bear with me because this is super super super important okay now this view component the loads view routers okay now let me show you how this will work we have loaded the V component and we can actually remove these slides because we don't need it I I hope you have understood take the screenshots and I hope it will be fine for you now here this is your big component whatever you write whatever it will be loaded right here perfect you see it is loaded so your view just file is perfectly working you can work with the buges right now perfect now let's see what step we have to do here here we have to use view router so let's see how we can pass the router into the game now so in order to do that we have to install the router so let's open a new terminal and install the router NPM install router maybe it's name is be router or router I'm not really sure let me guess it will be maybe yeah it should be it should not be router because no one knows what router it is so it should be the router instead let's go ahead okay the command was wrong not an OEM it should be NP Anna okay perfect me router is getting installed perfect now we're installing the BG routing and then we really use that in the entry point remember the entry point for our project is AB Dutchess this is the entry point and we have to use the router here perfect now bilges router will have files like this not the code syntax is different but yeah we will have to have lots of routes so the best things that make a new high for all of our view outer okay so let's go ahead and create a new file and let's name it router though chance perfect so in router dot JS file we will again we'll have to import view from view then we have to import the router from obviously view router then if it is a plug-in we have to use that right so we have to use this router okay that's perfect now here it's like this page okay it says okay if this is it this route or path is hid please return this beautiful a blade file view blade fine okay this exhausts exact same concept comes here as well okay so let's make a variable routes and then it will be an array obviously and then this area will have object an object are same as this one this one item to item to item so we in JavaScript we will work with object so path but is your brow location or the routing so let's say my name will rot and let's make it something like this for you to easily understand okay so this is now okay we have defined our route now we have to tell the villages route that which component it should use okay so we have to depart and define components as now we can we have to give some component what it should use so let's make a new component here and here and okay instead of new component you can make it let's make a new folder and let's call it pages okay it can be a page and let's name it as my first view page dot view and here in template simply return the vr you will have to have a root tag it can be anything so in our case it is a div and we can write an H tag here is that this is our first page okay perfect now we have to import that as well so we have to import and you can give a name that's a name is first page it can be anything and it should be imported from components folder then pages folder and under pages folder the name is this one okay perfect now we will use this component you see we are you we are importing this file and naming it first page and we are using this first page component when user hit this round okay perfect now let's check it out will that work no it will not work why it is not working because here this view component then load the routers so it we are not loading inside this view component we have to you see in welcome to Glade the PHP file we have to know that we just company perfect we did that how we do that let me show you in welcome dot blade dot PHP file we have loaded a big component ok perfect so we loaded it the component and this few component then load be router but unfortunately inside the view component we just have an h1 tag we do not load any router at all so how do you load a router perfect so that is one of the most important concept as well and let's see how we can load the router you can have this one there no problem so in order to load router we have to use router then you like this ok perfect so we have the rear outer now which means we are implementing this concept this virial component then load of you router perfect now if I hit this one router view D to register the component correctly ok it seems there is an error ok it's perfect so that means we are not using this view router ok it's defined here we are using it here but you see this file is of no use simply because why because we have written a code in a file and this file is not being used ok so we have to use this find right so let me show you how we can use that so we have written an array of routes and this area has one object one route but we are not actually exporting it so what we have to do we have to export the route so export and they hold new router and here we can pass mode and mode can be history perfect so what does this story mean history will remove the hashtag from your URL and that's why and it looks a little bit pretty and we have to use the routes here perfect and okay we are now exporting it now we need to import that in our main entry point okay if we do not import here what will happen if you do not import here as I told you before then web peg will take this file and will publish in to the plain view jizz of plain JavaScript code since this view router is not available in this space so it is not being in use so you have to understand all those basics concepts okay now here let's import our JavaScript router code okay this is our JavaScript router code let's import import router you can give any name router from router perfect now we have to pass that as well here as router perfect so we are using that router here and the V instant instance is declared with the element and the router in next if in future would might have store we might have translation files we can have anything so we have to define it there as well so I really hope it works now perfect its life and you can see this is our first page and the first component is getting loaded which is so called oppa Cole yeah I'm really excited and if you can remove that one doesn't really matter okay I know it's a our page you can remove from here it doesn't really matter at all so we will get only the page okay but yeah if you want to have a static menu that exact will stay unchanged when you move different pages you can define your component or code for menu here okay that will be kept fixed so we can keep that here so here I can write it at the menu which will be what was available in all the pages menu now let's make a new router here so how do we make a new router we make a new router here name wrong perfect name wrong so we don't have any component like that so we have to define that new route you can name it new route page and you can write it as new route page and we do not have it created here so let's go ahead and create that fine perfect okay so this is the second movie page Perfect's all is working fine we can load that file now okay we are getting an arrow since it's not executing so we are getting this error in here let's check that out okay okay we are using unnecessarily this one because it has it is not an object okay sorry my bad perfect you see this one is loaded and menu is also available and if you go back the menu is available the up in other page as well okay so what we have treated we have a complete V of villages and laravel setup which the lateral loads the villages and level can have the routing here their own routing okay so let me recap once more again first of all if you visit any page it will try to go ahead in and find out the maintain web dot PHP file and if it doesn't find any mates between execute the sparked out which is known as any rods and it return the welcome blade and then the welcome blade will load a view component perfect and this view component will then roll load the view router and then the view router will try to find a match for the route you have here if it find error if you'd find a match it will show you that component if it doesn't it will show exactly nothing perfect you see nothing you don't have any page so you can have a 42 for aerial page here and then you can return in a custom page okay he can do exactly whatever you want to do so yeah once more again is that in webpack Mixter JS file the important is that we have to take all this code in public gorgeous and your whole project is this fine this is your whole view just protect got it if you do view page source and if you click here you will see including this menu if I do a quick little search here we will be able to find the menu code here you see this is the menu so what let me show you one more interesting things here this menu is under what definitely h1 tag yeah h1 tag missing and this is how the villages in register entering your menu you see return CDPH h1 okay you see perfect and then after that we have a view router yeah B router so that mean whatever you write it here view engine then compile it to a code like this which is readable and understandable by the browser hope you got it thank you for watching this video up to this till now if you have not subscribed please subscribe my channel and one more important message is to give you is that you will be able to post any question regarding this series or any other series in our Facebook group development with a pilot yeah here in this group so you can add any question you have and join this group and you can publish any comments here or question here we will try to solve your questions okay thank you guys thank you for watching please support this channel and we will be making lots of cool videos hopefully you will like it and let me know how we can in explain a little better and we can make better explanation or make better videos okay we are new we are trying to help you stress home stay safe god bless you bye [Music]

Channel: AppifyLab

Views: 62,323

Keywords: laravel, vue, laravel vue, vue.js, vue laravel, vue admin, laravel admin, vue and laravel, fullstack laravel and vue, how to develop using laravel and vue, laravel vue login register, laravel vue login, jwt auth, laravel full stack, laravel vue spa, vue spa, vue spa with laravel, install laravel, install vue, how to install laravel, how to set up laravel and vue, vue and laravel set, vue router, vue components, laravel controller, laravel route, vue js, js, javascript

Id: NMTEfaPEYB8

Length: 50min 14sec (3014 seconds)

Published: Mon Apr 06 2020