Categories
Laravel Vue Js

Laravel 8.x configure Vue JS CRUD with Vue Router, Vuex, Vue-Axios

In this post I am going to showing example how to configure Vue JS CRUD with Laravel 8.x. We will create a Single Page Application(SPA) using the Laravel 8.x and Vue JS. In this post you will learn how to use vue router and v-form with vue-axios package how to work with laravel and vue js crud. I am showing example on Windows 10 with XAMPP server. More details on my previous post Install Laravel on xampp server.

First Install Composer on your computer, click here to download and install composer. Also please install git bash, click here to download and install git bash. Now we use git bash to run command.

Download the NodeJs pre-built installer for Windows, click here to download and install NodeJs on your computer.

Install Laravel 8.x in xampp directory “laravelvue”:

Go to your E:\xampp\htdocs directory, right click open git bash terminal and run command composer create-project laravel/laravel laravelvue to install Laravel.

Got to “laravelvue” directory or your project directory by command cd laravelvue.

Install Laravel UI & Auth:

Now Install Laravel UI package by command composer require laravel/ui, Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command php artisan ui vue –auth

Now create controller with Invokable by Artisan command make:controller, That command is fired into the app/http/controllers directory, go to controllers directory and you can find a new PHP file PagesController.php

Go directory app/http/controllers and open file PagesController.php and welcome view in __invoke method.

Now we have to create resources/views/welcome.blade.php vie blade file look like following code.

Now add following route in routes/web.php

So now it’s Vue time:

Now Install NPM by command npm install && npm run dev

Now Install VUE by command npm install vue

Now install all required VUE tools and libraries by a single command:

OR

Now Install vue-router by command npm install vue-router, or for details click here

Now Install vuex by command npm install vuex –save, or for details click here

Now Install axios and v-form for client side validation by command npm install –save axios vue-axios vform, or for details click here

Now make ready resources app js in directory resources/js/app.js

Now make routes libraries js in directory resources/js/routes.js, with related component.

Now run following command to compiled js and css resource.

Now create component files in directory resources/js/components/*.vue files, with related component.

  • AppComponent.vue
  • HeaderComponent.vue
  • FooterComponent.vue
  • LoginComponent.vue
  • RegisterComponent.vue

resources/js/components/AppComponent.vue

resources/js/components/HeaderComponent.vue

resources/js/components/FooterComponent.vue

resources/js/components/LoginComponent.vue

resources/js/components/RegisterComponent.vue

Now every thing setup is done. Now you are ready to check it.

configure-vue-js-view

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.