Laravel 11 : Install and use vuejs and vue router in laravel

welcome in this video we're going to learn how to install and use vs and vou in 11 this is the fundamentals of building an application with RAV on back end and V gs on front end on the end of this video we'll be able to create a RAV project create vgs component pages and navigate in different pages now let's show you how the app works this is the homepage of our application you can navigate in different pages you see here we are in about page you can return to the homepage or right sometime user can type Ur which is not exist in our application like this it you're going to build direct to the not found page which will look like this okay so before start develop this application make sure you have right program install right PHP composer and not GS now we get starting by create project via composers create project command by going on r.com in get started ready copy this command open our terminal and make sure we are in a good directory where we are going to install our application for me I'm going to be in desktop R CD desktop and pass composer create project command since we're going to create a and view GS app I'm going to call it r 11- view feel free to use the name you want cool ready this example import Das app name add. view right let's save and press enter all right our application has been created ready go ahead and CD into our 11. view open it in our vs code cool ready open a new terminal in our vs code I'm going to use PHP Artis serve which should spin up our web server for me and let open this Ur right here in our browser cool you can see now our default R page here now let's walk around it to provide all the necessary vew GS components that we will need for building out our application so the first thing I want to do is to go in our vs code open a new tab terminal and install view GS with all his dependencies I'm going to use npm install view at rtist view router at rtist we to create this out and add npm instave DD vit gs/ plugin. viw ready go now on our project in V.C config.js import view from at vit gs/ plugin. viw in plins ad view all right let's continue by going on r is on view on welcome. bread. PHP remove this and add at vit resources CSS app.css in body tag remove all those contents add at vit resources slgs app.js let's go now in our V code terminal we want to compile our asset and run a hot to reload for us we have to use npm run div right let's now take a look that appear in our browser the default R page is changed you can see now something which look like this now let's look around it and add vew GS components let's jump up in our vs code on resources on GS create a new folder called components on components add a file file called app. view within add templates with a title Hello app all right let go in app.js import create app from view import app from do components SL app. View and then create app app and mount app ID save it now we are going to call our app view GS component in our welcome. bre PHP we go on viewers in welcome. bread. PHP and add here a div with app ID all right let's go now in our browser and you can see here Hero app which mean that our view app component is called here right this is our first view GS component of this application we create other vgs component pages and make different Navigation in our vgs component page let's go back in our V code the first thing I'm we going to do is to go in our vs code terminal create a new tab and install view router by using npm install view- router at four cool in our folder on resources on gs on component we are going to create a new file called homepage. view within there add template with title homepage all right save it let's continue and create another file called about page. View wein there add title called about page let's save it and then create another file called not found page do view within add templates and title not found page all right let's create another folder called the router on router create a file called index.js within there we are going to import create router create web history from view- router import home from do do/ component SL homepage. view import about from do do components slab page. view import not found from dot do/ components slot found. view all right let continue by create a constant routes and add path slash which we called the component home create another PA slab which we called component about create another path with PA Match which will called a component not found let continue by create another con router eal create router history create web history roots and then export default router all right let's now go on components in app do view create and nav tag add a div in that div add root rink to slash home add another Roots router rinks to SL about about all right and add a main tag within we are going to add router SL View all right R save change and continue by going in app. Gs import router from dot SL router after that go in create app here add use router all right let's now save change now let go take a look that appear in our browser now the homepage from vgs component is our default page of our application you can see now we can navigate in this application cool but there is small error where user type a URL which is not exist in our application we were going to BU direct to a not found page which come from onra folder by default all right but for us we want to use a not found page which come from to our vew GS component okay to fix this problem we are going to add on routes in web.php this line router get slash PA Match function which will turn view welcome where PA Match here all right now if you go back in our browser and user type a URL which is not exist in our application it you're going to be redirected to the not found page which come from on view GS component you will see something which will look like this all right before ending this video I'm going to add active class to root rink which we're going to show the current page when we navigating cool let's go in our vs code and add on router in index. Gs rink exact active CR active and then go on resources on CSS in app. CSS add rink margin 10 pixel rink do active background color red caror white all right and let's add on component in app. Gs a class link on our router rink all right and add a P tag with strong tag current root path with router. forp all right let's now go take a look that appear in our browser you can see now if we navigate in different page we are going to add a color to our current active page all right so that is all about to install and use vew GS and view R in R 11 application thank you for watching this video if you have still have any kind of question can ask me in comment box don't forget to subscribe to my channel see you in next video Happy coding

Channel: Devs Train

Views: 4,689

Keywords:

Id: -bJL00w5Mig

Length: 13min 27sec (807 seconds)

Published: Fri Apr 12 2024