Laravel 7 Vue JS CRUD Example Tutorial

In this tutorial you will learn about the Laravel 7 Vue JS CRUD Example Tutorial and its application with practical example.

In this Laravel 7 Vue JS CRUD Example Tutorial, I’ll show you how to create simple crud application using Vue Js in laravel. In this tutorial you will learn to create basic crud application with Vue Js in laravel. In this step by step tutorial I’ll demonstrate the implementation of simple crud application using Vue Js in laravel.

Table Of Contents−

Laravel 7 Vue JS CRUD Example Tutorial

Download Laravel Apps
Configure Database Details
Install NPM Dependencies

Create Migration, Model and Controller
Define Routes In web.php
Create Vue Js App

Create Vue Js Components For Crud App
Define Vue Js Routes For Crud App
Include Vue Js Dependencies to app.js

Run Development Server

Step 1: Download Laravel Apps

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Configure Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Install NPM Dependencies

npm install

1	npm install

Next, install vue-router and vue-axios. vue-axios will be used for calling Laravel API. Run the following command on your command prompt:

npm install vue-router vue-axios --save

1	npm install vue-router vue-axios --save

After installing all dependencies run this command:

npm run watch

1	npm run watch

Step 4: Create Migration, Model and Controller

Now, in this step we will create model and migration file along with controller file. Please run the following command:

php artisan make:model Post -mcr

1	php artisan make:model Post -mcr

Now open create_posts_table.php migration file from database>migrations and replace up() function with this:create_posts_table.php

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Now, Open Post.php model from app folder and update this code into Post.php model:

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    protected $fillable = ['title', 'description'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title', 'description'];

}

Next open PostController and define index, add, edit, delete methods in PostController file. So Go to app>Http>Controllers folder and open PostController.php file. Then update the following method into this:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
 
class PostController extends Controller
{
    // all posts
    public function index()
    {
        $posts = Post::all()->toArray();
        return array_reverse($posts);
    }
 
    // add post
    public function add(Request $request)
    {
        $post = new Post([
            'title' => $request->input('title'),
            'description' => $request->input('description')
        ]);
        $post->save();
 
        return response()->json('The post successfully added');
    }
 
    // edit post
    public function edit($id)
    {
        $post = Post::find($id);
        return response()->json($post);
    }
 
    // update post
    public function update($id, Request $request)
    {
        $post = Post::find($id);
        $post->update($request->all());
 
        return response()->json('The post successfully updated');
    }
 
    // delete post
    public function delete($id)
    {
        $post = Post::find($id);
        $post->delete();
 
        return response()->json('The post successfully deleted');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Resources\PostCollection;

use App\Post;

class PostController extends Controller

{

// all posts

public function index()

{

$posts = Post::all()->toArray();

return array_reverse($posts);

}

// add post

public function add(Request $request)

{

$post = new Post([

'title' => $request->input('title'),

'description' => $request->input('description')

]);

$post->save();

return response()->json('The post successfully added');

}

// edit post

public function edit($id)

{

$post = Post::find($id);

return response()->json($post);

}

// update post

public function update($id, Request $request)

{

$post = Post::find($id);

$post->update($request->all());

return response()->json('The post successfully updated');

}

// delete post

public function delete($id)

{

$post = Post::find($id);

$post->delete();

return response()->json('The post successfully deleted');

}

Step 5: Define Routes in Web.php

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

<?php

Route::get('{any}', function () {

return view('app');

})->where('any', '.*');

Routes/Api.php

<?php
 
use Illuminate\Http\Request;
 
 
Route::get('posts', 'PostController@index');
Route::group(['prefix' => 'post'], function () {
    Route::post('add', 'PostController@add');
    Route::get('edit/{id}', 'PostController@edit');
    Route::post('update/{id}', 'PostController@update');
    Route::delete('delete/{id}', 'PostController@delete');
});

<?php

use Illuminate\Http\Request;

Route::get('posts', 'PostController@index');

Route::group(['prefix' => 'post'], function () {

Route::post('add', 'PostController@add');

Route::get('edit/{id}', 'PostController@edit');

Route::post('update/{id}', 'PostController@update');

Route::delete('delete/{id}', 'PostController@delete');

});

Step 6: Create Vue Js App

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>Laravel Vue JS CRUD Example  - w3adda</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    <style>
        .bg-light {
            background-color: #eae9e9 !important;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel Vue JS CRUD Example - w3adda</title>

<style>

.bg-light {

background-color: #eae9e9 !important;

}

</style>

</head>

<body>

</div>

</body>

</html>

Step 7: Create Vue Js Components For Crud App

In this step, go to resources>js folder and create the following vue js component files:

App.vue
AllPost.vue

AddPost.vue
EditPost.vue

App.vue is the main Vue file. We will define router- view in the file. So all route pages will be shown in the App.vue file

Open App.vue file and update the following code into your file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel Vue CRUD Example</span>
        </div>
 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Home</router-link>
                    <router-link to="/add" class="nav-item nav-link">Add Post</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

<span class="text-secondary">Laravel Vue CRUD Example</span>

</div>

<router-link to="/" class="nav-item nav-link">Home</router-link>

<router-link to="/add" class="nav-item nav-link">Add Post</router-link>

</div>

</nav>

<br/>

<router-view></router-view>

</div>

</template>

export default {}

</script>

Next, Open AllPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">All Posts</h3><br/>
 
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.description }}</td>
                <td>{{ post.created_at }}</td>
                <td>{{ post.updated_at }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit
                        </router-link>
                        <button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/posts')
                .then(response => {
                    this.posts = response.data;
                });
        },
        methods: {
            deletePost(id) {
                this.axios
                    .delete(`http://localhost:8000/api/post/delete/${id}`)
                    .then(response => {
                        let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
                        this.posts.splice(i, 1)
                    });
            }
        }
    }
</script>

<div>

<h3 class="text-center">All Posts</h3><br/>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th>Created At</th>

<th>Updated At</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

<td>{{ post.title }}</td>

<td>{{ post.description }}</td>

<td>{{ post.created_at }}</td>

<td>{{ post.updated_at }}</td>

<td>

<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit

</router-link>

<button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

posts: []

}

created() {

this.axios

.get('http://localhost:8000/api/posts')

.then(response => {

this.posts = response.data;

});

methods: {

deletePost(id) {

this.axios

.delete(`http://localhost:8000/api/post/delete/${id}`)

.then(response => {

let i = this.posts.map(item => item.id).indexOf(id); // find index of your object

this.posts.splice(i, 1)

});

}

</script>

Next, Open AddPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Add Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addPost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Add Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        methods: {
            addPost() {
 
                this.axios
                    .post('http://localhost:8000/api/post/add', this.post)
                    .then(response => (
                        this.$router.push({name: 'home'})
                        // console.log(response.data)
                    ))
                    .catch(error => console.log(error))
                    .finally(() => this.loading = false)
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

methods: {

addPost() {

this.axios

.post('http://localhost:8000/api/post/add', this.post)

.then(response => (

this.$router.push({name: 'home'})

// console.log(response.data)

))

.catch(error => console.log(error))

.finally(() => this.loading = false)

}

</script>

Next, Open EditPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Edit Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="updatePost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        created() {
            this.axios
                .get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)
                .then((response) => {
                    this.post = response.data;
                    // console.log(response.data);
                });
        },
        methods: {
            updatePost() {
                this.axios
                    .post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)
                    .then((response) => {
                        this.$router.push({name: 'home'});
                    });
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

<button type="submit" class="btn btn-primary">Update Post</button>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

created() {

this.axios

.get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)

.then((response) => {

this.post = response.data;

// console.log(response.data);

});

methods: {

updatePost() {

this.axios

.post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)

.then((response) => {

this.$router.push({name: 'home'});

});

}

</script>

Step 8: Define Vue Js Routes For Crud App

In this step you need to define vue routes. Lets Go to resources>js folder, create a file named routes.js and update the following routes into your routes.js file:

import AllPosts from './components/AllPosts.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
 
export const routes = [
    {
        name: 'home',
        path: '/',
        component: AllPosts
    },
    {
        name: 'add',
        path: '/add',
        component: AddPost
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditPost
    }
];

import AllPosts from './components/AllPosts.vue';

import AddPost from './components/AddPost.vue';

import EditPost from './components/EditPost.vue';

export const routes = [

{

path: '/',

component: AllPosts

{

path: '/add',

component: AddPost

{

path: '/edit/:id',

component: EditPost

}

];

Step 9: Include Vue Js Dependencies to app.js

Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:

require('./bootstrap');
window.Vue = require('vue');
 
import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

require('./bootstrap');

window.Vue = require('vue');

import App from './App.vue';

import VueRouter from 'vue-router';

import VueAxios from 'vue-axios';

import axios from 'axios';

import {routes} from './routes';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

const router = new VueRouter({

mode: 'history',

routes: routes

});

const app = new Vue({

el: '#app',

router: router,

render: h => h(App),

});

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run watch

1	npm run watch

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Vue JS CRUD Example Tutorial