Laravel 8 Vue JS CRUD Tutorial

Laravel 8 Vue JS CRUD Tutorial

2 Comments on Laravel 8 Vue JS CRUD Tutorial

Laravel 8 vue js crud example; In this tutorial, you will learn how to create crud app using Laravel 8 + vue js framework.

As well as, you will learn how to build crud APIs in laravel for Vue.Js spa crud example application in Laravel.

And this laravel vue js crud tutorial will guide you how to implement laravel vue js crud (create, read, update and delete) spa application with vue js router and laravel 8 app.

Laravel 8 Vue JS CRUD Example Tutorial

Use the following steps to create laravel vue js crud application:

  • 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, open your terminal and execute the following command to download laravel fresh setup for creating laravel 8 vue js crud example app: 

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

Step 2: Connecting App to Database

Now, you need to visit the downloaded laravel 8 app root directory and open .env file. Then add database details as follow: 

  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
Recommended:- Laravel 8 Livewire CRUD with Jetstream Tutorial

Step 3: Install NPM Dependencies

In this step, execute the following command on terminal to install frontend dependencies:

npm install

Next, 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

After installing all dependencies execute this command on terminal:

npm run watch

This npm run watch command will listen for file changes and will compile assets instantly. You can also execute this npm run dev command on terminal. It won’t listen for file changes.

Recommended:- Laravel 8 Ajax CRUD with Image Upload Tutorial

Step 4: Create Migration, Model and Controller

Create Post model, migration, and controller. So execute the following command on terminal for that:

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

Migrate the database using the following command:

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'
    ];
}
Recommended:- Laravel 8 Ajax CRUD Using Datatable Tutorial

Now, open your terminal and execute the following command to create PostController.php file:

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');
    }
}
Recommended:- Laravel 8 Rest API CRUD with Passport Auth Tutorial

Step 5: Define Routes in Web.php

Now define routes in the web.php and api.php routes file. So Go to Routes folder and Open web.php and Api.php file and update the following routes:

Routes/web.php

<?php

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

Now open api.php file and add the following routes into it:

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');
});
Recommended:- Laravel 8 Auto Load More Data On Page Scroll

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 8 Vue JS CRUD Example  - Tutsmake</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>
Recommended:- Laravel 8 Livewire File Upload Tutorial Example

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

Note that, 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>

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>

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>

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>
Recommended:- Laravel 8 FullCalendar Ajax Tutorial Example

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
    }
];

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

Step 10: Run Development Server

Now execute following command on terminal to update app.js file:

npm run watch

Conclusion

In this laravel vue spa crud app, you have learned how to implement single web page application with vue in laravel.

Recommended Laravel Vue js Tutorials

Recommended:- Laravel 8 Vue JS Post Axios Request Tutorial
Recommended:- Laravel 8 Vue JS Live Search Example
Recommended:- Laravel 8 Vue Js Infinity Page Scroll Example
Recommended:- How to implement Datatables with Vuejs And Laravel 8
Recommended:- How to make dependent dropdown with Vue.js and Laravel 8
Recommended:- Laravel 8 Vue JS Full Calendar Tutorial Example
Recommended:- Laravel 8 Joins Example Tutorial
Recommended:- Laravel 8 – Form Validation Example
Recommended:- Laravel 8 Ajax Post Form Data With Validation
Recommended:- Laravel 8 Flash Message Example Tutorial
Recommended:- Laravel 8 Authentication with Breeze Tutorial Example
Recommended:- Laravel 8 Bootstrap Auth Scaffolding Example
Recommended:- Laravel 8 Auth Scaffolding using Jetstream
Recommended:- Laravel 8 Autocomplete Search from Database Tutorial
Filed Under: Laravel, Vue

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

2 replies to Laravel 8 Vue JS CRUD Tutorial

  1. Nice article.
    This is very helpful for me.

    Thank You

    Reply

  2. Very good article.

    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *