Laravel - Vue SPA (Single Page Application) Vue Router - Basic Setup Part 1

hi welcome to my channel please subscribe if you haven't done it yet thanks hi everyone and welcome back to the channel today i start a new tutorial about vue.js spa i'm using laravel at the as a backend but you can use whatever back-end you want the main content here is the view spa or view single page application so we will serve the content to the user without any page load so today we will just take the basics we set up the our environment and stuff like that and we are creating these two pages a website which is which has a home and about section and as you can see we can switch between the two pages without any page load our uri has updated by view router we router take care about our routing and we also have a 404 page for this single page application so if the user types in some dummy text in the uri so of course this route doesn't exist then we get this page not found 404 error message and then the user can navigate back to our home page okay so this is what we are doing today and then we are take it even further we will create form and we will be able to save new articles and we are able we will be able to serve these new articles and show to the user and all of this will happen without any page reload so it will be a complete tutorial for vue.js spa so let's just start it okay so first of all let's start create a new laravel project i'm naming my new project view spa as you can see right that's done now let's see the inside this newly created laravel folder okay now we are inside this view spa folder let's go to the laravel website and go to the front end and front-end scaffolding and let's you let's install this laravel ui through composer so let's copy this command and go back to the command line paste the code hit enter right that's done as well now let's uh use this php artisan uiview dash dash out command as well right that's it okay now let's install a tailwind css using npm install tailwind css right that's done as well so now at the moment we have bootstrap as our dependency and tailwind css as well so let's open up this newly created project in our code editor in my case it is we as code right so i have this new project in my vs code editor let's go to the let's go to the package.json and as you can see we have bootstrap as our dependency let's delete this we don't want to install it by a node package manager and we can delete this proper js as well and probably i won't need jquery but i just leave it there for now and maybe later on i exclude it from my project and as you can see we have tail in css and view as well now let's add the view router as well for our packages so so i'm on view router website and i'm at the installation section so let's just use npm install view router right that's done as well and as you can see we have view router as our dependencies now as well in our package.json file so let's just continue to set up a tailwind css and integrate it into our application so let's go back to the tailwind css website and let's just add these three lines into our code so let's go to the resources folder sas folder and app.says we don't need this bootstrap because we're using tail in css and we don't need these variables for now so let's just paste these three lines from the one css website and just before we continue let's go to the js folder and we have this app.js we can delete all these files we still need view and we still require this bootstrap file which is not related to the actual booster framework it's related to this bootstrap.js file but here we can see it's required bootstrap which is the frontend framework and the popper.js so we can delete them because we don't need them for now let's delete these commanded lines as well right so that's all i have in the bootstrap.js and that's it that's all i have in my app.js right so let's continue to integrate uh tailwind css if you scroll even further down you will you will see this npx still in css in it so let's just run this command as well right it has created our tailwind config js file as you can see down here let's go back to main website and if you scroll down you will see this laravel mix part and as as we are using says we need to follow these commands here so we need to use this piece of code in our application let's go to the webpack.mix.js and let's just add this line in our code and we already have this part in our code so just we just need this options part let's add this don't forget the semicolon at the end and as you can see we need to specify the tailwind config.js file location and it is in our root folder so let's just delete all these and that's it so now this file is wired in our application and also in the production we would like to have as small css file as possible so we need to cut out all the unused css and we have a great package for that if you type in inside google larawell purge.css you will find the very first link is a spacey package on github let's just visit that page and if you scroll down we need to [Music] install it through npm let's just do that right that's done as fast so all we need to do now let's grab this line of code go back to vs code and inside this webpackmix.js let's just add this code as well and we need one more piece of code which is this one and let's add it at the end okay so that's it for the webpackmix.js we can close these and now let's open up a terminal inside this code editor and let's just uh and do npm install so we right that's done now let's do npm run a watch so our css and js file will be compiled right so our files has been compiled so as it's working as expected and as you can see our css file is 1.7 megabyte but that's why we installed purge css if i hit ctrl c and i type in npm run prod means production then it will cut out all the unused css yeah and of course because we are not using any tailwind css currently our file is very small but for development we need to use npm run watch okay and open up one more terminal just down here and run our server so php artisan serve okay our server available on this address and here you go we have a freshly installed hardware 7 application now let's just delete everything from this home page this welcome page is located inside the resources views folder and welcome.play.php let's delete everything and let's use the layouts provided by laravel out of the box this app.play.php so let's go back to the webcam.blade.php and say extends because we want to extend this app file we need to specify the folder where it's located it's located inside the layout and we want the app file we don't need to type in the blade.php laravel will automatically recognize this file and now let's say where we would like to place our content we would like to place in the section content which is inside this app file and if we scroll down you will see this yield content so all so everything we type in between these two section tags will be placed here now we can delete this main tag we don't need it and we can delete this nav as well we will use view router navigation links so let's delete this we definitely need we need to keep this div with id of app because that's where our vue.js application will be initialized okay and our js file and the app css file is linked in so that's good we will using nunito as our font so let's just so let's just go to the app.s css file and okay so now if i type in something here we should see it on the screen so let's just create a div for example and type in this is our home page and let's just test our tab in css and for example text red 500 so it should be a quite big text with a red color hit refresh and here you go our tailwind css is working and everything is looks fine for now okay so now we don't use view router we are using laravel default routing system if we are creating a new page we should wire it in inside the routes folder web.php and as you can see we have two routes at the moment the home page and the basically the logged in home page which would take us to the home controller but we don't use any controller for routing doesn't matter what the user types in into the url url we need to always serve this welcome page what we have just created so we can say any where we mean any is literally anything then we want to serve this welcome to welcome view so let's just try this out so for example if i type in about as you can see we always serving this welcome view no matter what the user types in even if we don't uh go one more section deeper we always serve this home page okay so now let's just include view router inside our application so let's go to the resources js and app.js file and we already have required vue.js inside our application now let's import view router right so we are importing view router now let's use it inside our view js application so we need to say view dot use view router and also initialize it inside our application okay so let's say router is equal a new router is equal a new view router and we want to pass in an object to this called routes okay now we need to import this routes file which is not exist yet but we will create it soon so let's jump up here again and say import routes from routes and let's just create these routes route.js file okay so we have just have this error because this uh routes file doesn't exist yet but let's create it inside this js folder so create a new file called routes okay so we don't have any error now as you can see right so let's just create this routes.js file we need to say export default okay so first of all we need to specify how we would like to record what pages has been visited by the user and we will using the browser built-in tracking system so all we have to do is say mode so this will be the mode how we track the visited pages and it's called history so it will use the browser build in history okay so now we need to specify paths for example the home page or about page and the component what we would like to serve to the user when they are visiting that pages so first of all let's just create our home page so let's create routes and the path will be the home page and then we need to specify what component you would like to show to the user when they are visiting our homepage or component you would like to show the home component for example which is not created yet but we will create in a second and let's just create a second route for example an about page in this case so part will be about and the component is the about component right so now we have two routes the home page and the about and when the user is on the home page we would like to show the home component and when the user is visiting the about page they would like to show the about component so now now let's just import these components basically they are not exist but let's just import them and then we will create them as well okay so import and the second import basically identical to this one but it will be the about component okay and down here we got the error because these components are doesn't exist yet so let's just create these two components we have this example component by default from by laravel let's delete this and let's create our home component first so home dot view and let's create the basic structure of a view component so template we need the template tags and we need a script part where we do export default okay so inside this component let's just create a class of text 3 let's say 2 xl and text gray 800 for example and this will be home page and now let's just do exactly the same for the about page so let's create the about component new component about dot view let's paste this in and let's say this is the about page and let's make it green for example so we can see some difference right hit refresh okay and we can't see anything because we need to go our to our com.blade.php and this is what we see now but instead of this content we would like to serve our view js spa content our view router content basically so we need to say router view and if we are going back to the page and hit refresh we get the home page and if i type in about we got the about page as well okay so our application is working as we expected now let's just create links it's very easy create links for pages we will using the view router to do that as well so let's say we would like to create a navigation bar all we have to do let's create a div for that let's say class of flex bg gray 100 and let's create one more div all these are they are in css classes and let's say it's a container mx auto and let's give it a order button as well okay and here down we would like to have our links okay so all we need to say is router link right so all we need to do is say router link and the first link will go to the home page so we need to specify where to go to so we need to say to the home and the second one will be for the about page okay so where we would like to go to we would like to go to the about page so about right let's just have a look hit refresh okay so basically we have this basic navigation bar let's just style this a little bit so first of all let's place our content inside the container as well so div and let's grab this tag and place it inside here and let's just give some padding for this as well padding y four and let's just give some margin right four as well okay let's have a look now okay it's much better now okay so we have the home page and about page and as you can see we don't have any page to load so this is basically our single page application very basic and very simple spa view view js spa so we can see the exact routes where we are but without any page reload if you check our view dev tool we are on the home page now and if i select this link as you can see we have a router link active class here and if i click on the about the router link active has been changed to the about page uh but we so it's added by automatically by view router but we can override this class so i will add my own class to the current page so all we need to do for that go to the router.js and just under this mode we need to say link active class and we need to specify what class we would like to add for the active link in my case i will use the terwin css class for that which will be font semivolt so the view router will automatically update our active link and add this class to the active link so let's just have a look and as you can see if i go to the home page home page is active now and if i go to the about page our about page is semi-bold but our home page is semi-bold as well it is because we need to specify that the path has to be exact because view router thinks we are on the about page but there is a slash and on the homepage there is a slash as well so that's why both of them is active because because of this slash so let's go back to the welcome.blade.php and here we have the route link and just after this to slash we need to say exact and that's it now our application should work as we expected yeah as you can see our two pages working okay so this is of course a very basic uh spa now let's just take care about four or 4 404 error because if i type in something dummy of course we're not serving any component but we still see this home home page and about page links but we would like to show to the user that this page doesn't exist so let's just create one more component for that if i go to the component folder let's create a not found.view and let's just grab this when i search the not found component i want the whole page taken and i don't want to see the navigation bar as well so let's just make it absolute 0 so it will take the whole page and bg gray 200 and i want the content to be exactly on the middle of the page so items center and justify center as well let's create a div and let's just add some class to this as well so text free xl page not found 404 right and let's just make text center as well okay and now let's go back to our route js file so create one more path okay so every part which is not defined here we want to serve the component not found and don't forget the comma and we need to import this not found component and i forgot a comma here right that's compiled let's have a look now hit refresh okay so our single page application working as we expected we can visited the home page and about page you can switch between them without any page reload and let's just try some not existing page and we have this page not found error but i want to make it full width and height and i forget the absolute right so i have a typo here it should work now as i expected okay and we still need items center yeah we need to make it flex container [Music] i forget to add this one there you go okay so so if the user visiting any page does not exist then we are serving this page not found error for them but if the page exists then we are serving our website for them okay so that's it for now and in the next video we will take it even further we will create a form where we will be able to create new post so we will communicate with the database uh through laravel api api routes and we will using laravel controllers but all of these will be without any page load so we are taking further this view spa ok thanks for watching please subscribe and bye

Channel: Code Fisher

Views: 22,932

Keywords: Vue SPA, Vue js, Vue Single Page Application, Laravel Vue SPA, Laravel Vue single page application, Vue Vue router, Vue Router, Tailwindcss, Vue js Laravel Vue router, Vue js Laravel setup

Id: gCpPuIYMvs8

Length: 26min 56sec (1616 seconds)

Published: Tue Jul 28 2020