Wednesday, 21st November 2018
21 November 2018

Create CRUD app in Laravel with Vue Js

In this tutorial, we are going to create a simple crud application using Vue js and Laravel.We going to use Vue.js 2.x for frontend and Laravel 5.5 for creating our backend web services.

Installing and configuring Laravel 5.5

Installing Laravel 5.5

If you have not installed Laravel on your server, then run following commands to install and configure Laravel 5.5 on your server

Configuring file permissions

Once installation of Laravel framework is complete successfully then you need to provide read-write permission to below folders

  • storage/
  • bootstrap/cache

Run the following command to provide read-write permission

Configuring database connection

In Laravel you can configure your database connection by editing following fields in your .env file. .env file is situated in Laravel root directory.

Creating Our tables and Models

In this step we are going to create migrations for our table, then model for our Laravel Crud Application

Creating Table Migrations

Open your command line interface and type the following command to generate table migration for our crud app

Once above command is executed successfully a new file named something like 2017_09_23_180359_create_posts_table.php is created in your database/migrations directory. Open that file and put following code in it.

After saving above file run below command to migrate your tables.This will create a new table in your database named posts.

Posts-table-structure-mysql

Creating Model

In order to do queries with the database using Eloquent in Laravel, we need to create a Model. Let’s create our Posts Model by running below command on our terminal.

running above command will create a new file name Post.php in our app directory. Open that file and add following code in that.

Creating controllers and register it in Routes for API’s in Laravel

Generating Controller

In Laravel, you can generate your controller by running below command on your terminal

Now open your app/Http/Controller/ApisController.php add following code in it

Registering our Routes

Open your routes/web.php and add below codes in it.

Setting and configuring Vue js with Laravel 5.5

In this step, we going to install all Vue js dependencies using NPM, create Vue components and write and configure Vue methods to interact with our Laravel API’s

Installing Vue dependencies

Run below command to install Vue js and bootstrap Frontend dependencies

Install vue-router by running below command for Vue js routing

Install vue-axios by running below command for Vue js api calls

Once the dependencies of have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. Run npm run dev command on the terminal to process the instructions written in your webpack.mix.js file. npm run dev command will process the instruction written in webpack.mix.js file and place your compiled CSS and js in public/css and public/js directory.

Configuring Vue.js App and initializing Modules.

Open app.js file you can found it in resources/assets/js/ directory and add following code in it.

Creating your Vue components to create, edit, delete, list, view posts.

All vue js components are kept in resources/assets/js/components directory.

Creating a layout for our Vue App.

Create a new file App.vue in resources/assets/js/components directory and put following code in it.

Creating Vue component to list posts.

Create a new file Listposts.vue in resources/assets/js/components directory and put following code in it.

Listing records in Vue js

Creating Vue component for add post.

Create a new file Addpost.vue in resources/assets/js/components directory and put following code in it.

Creating Record in Vue js 2.1

Creating Vue component for Edit post.

Create a new file Editpost.vue in resources/assets/js/components directory and put following code in it.

Editing Record in Vue.js

Creating Vue component for Delete post.

Create a new file Deletepost.vue in resources/assets/js/components directory and put following code in it.

Deleting records in Vue js

Creating Vue component for View post.

Create a new file Viewpost.vue in resources/assets/js/components directory and put following code in it.

Viewing record in Vue js

Integrating Vue js with Laravel 5.5.

Create a new file vueApp.blade.php in resources/views directory and add following Code in it.

Running our Application.

Open your terminal and type below command to run the application

Above command will start the server on port 8000. your app URL something looks like http://127.0.0.1:8000/ or
http://localhost:8000/ copy the URL and open it in your favorite Browser.

That’s it, Thanks for reading please feel free to add a comment if you found any issue and trouble.

Also, Complete source code of this tutorial is available on Github you can clone from below link https://github.com/sharadjaiswal1411/vuelaraveldemo

Close