Laravel 8 Vue JS CRUD Tutorial

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

In this Laravel 8 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 8. In this step by step tutorial I’ll demonstrate the implementation of simple crud application using Vue Js in laravel 8.

Table Of Contents−

Laravel 8 Vue JS CRUD Tutorial

In this step by step guide, we will be creating a simple crud operation application with validation in laravel 8. In this example you will learn how to insert, read, update and delete data from database in laravel 8.

Install 8 Laravel 8 App
Connecting App to Database
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: Install 8 Laravel 8 App

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: Connecting App to Database

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

Now, you need to setup Vue Js In Laravel 8 and install Vue Js dependencies using NPM. So execute the following command on command prompt.

npm install

1	npm install

Now, install vue-router and vue-axios. vue-axios will be used for calling Laravel API. execute 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 execute this command on terminal:

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. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

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 file, which is placed inside app/models directory and update the code into Post.php model:

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description'

];

}

Now run following command to create PostController.php file:

php artisan make:controller API\PostController

1	php artisan make:controller API\PostController

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

<?php
 
namespace App\Http\Controllers\API;
 
use App\Http\Controllers\Controller;
 
use App\Models\Post;
 
use Illuminate\Http\Request;
 
use Validator;
 
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\API;

use App\Http\Controllers\Controller;

use App\Models\Post;

use Illuminate\Http\Request;

use Validator;

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('layouts.app');
})->where('any', '.*');

<?php

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

return view('layouts.app');

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

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

routes/api.php

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');
});

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 we will create Vue Js app, go to resources/views and create one folder named layouts. Inside this folder create a blade view file named app.blade.php file.

Now, go to resources/views/layouts and open app.blade.php file. Then put 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 8 Vue JS CRUD Example</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 8 Vue JS CRUD Example</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
AllPosts.vue
AddPost.vue
EditPost.vue

App.vue

AllPosts.vue

AddPost.vue

EditPost.vue

Here, App.vue would be the main Vue file. Lets define router- view in the file. Now all route pages will be displayed on the App.vue file. Go to App.vue file and put 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 AllPosts.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

Now, you need to define vue routes. So 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:

require('./bootstrap');
import Vue from ‘vue/dist/vue’;
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');

import Vue from ‘vue/dist/vue’;

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 8 Vue JS CRUD Tutorial