Simple Like System In Laravel 8.x Using Vue Js

Hi Artisan,

In this tutorial, i will guide you step by step how to create single post like or favorite system in laravel using vue js. Here i will create a post table which contains a like field. When a user hit this like button then this like field will be incremented.

A very common feature of newer applications, especially social media applications, is the ability to favorite, or like a specific entity such as a post, tweet, etc. In this tutorial I will show how to do the whole process.

From backend to front end of how to like a resource with Laravel on the backend and VueJS on the frontend. In this case, we will be allowing a user to like a single post.

I will use vue js to to create it. I will create a PostCompoent and load it inside single post blade file. Le'ts start.


Step 1: Install Laravel 

First of all, we need to get fresh Laravel 8 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

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


Step 2: Make auth

Laravel's laravel/ui package provides a quick way to scaffold all of the routes and views you need for authentication using a few simple commands:

composer require laravel/ui --dev

php artisan ui vue --auth


Step 3:  Setup Migration

To create post like system, run below command to create a post model

php artisan make:model Post -fm


after doing it open your posts migration file and paste this following code.

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


Now run php artisan migrate to migrate our table.

php artisan migrate


Step 4:  Setup Route


//Like route


Step 5:  Setup Model

Now open Post model, cause we have to bind our route. If you don't know what is route model binding, you can read this article. Route model binding


namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
    protected $guarded = [];

    public function getRouteKeyName()
    	return 'slug';


Step 6:  Setup Controller

Now open PostController and paste this following code.


Read also : Vue Laravel CRUD Example With Vue Router & Sweet Alert



namespace App\Http\Controllers;

use App\Post;
use Facades\App\Repository\Posts;
use Illuminate\Http\Request;

class PostController extends Controller
    public function index()
        $posts = Post::latest()->get();
        return view('post.index',['posts' => $posts ]);

    public function show(Post $slug)
        return view('post.single',['post' => $slug ]);
    public function getlike(Request $request)
        $post = Post::find($request->post);
        return response()->json([
    public function like(Request $request)
        $post = Post::find($request->post);
        $value = $post->like;
        $post->like = $value+1;
        return response()->json([


Step 7:   Install Vue dependency and edit configurations

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install


now open this followng file and paste this code. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix.


const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

now create a LikeComponent to create our post and paste this code.




now open app.js file and paste this followng code.



window.Vue = require('vue');

Vue.component('like-component', require('./components/LikeComponent.vue').default);
const app = new Vue({
    el: '#app',


Step 8:   Setup blade file


Now time to setup our blade file. open resources/layouts/app.php and paste this following code.



Now open resources/views/post/post.blade.php file and paste this code. 





Look what is happening here, here i just send post id with this component and catch it using props. Hope you got it.

Now everything is set to go. Now just we have to compile our all JavaScript file. so run below command.

npm run dev 
npm run watch


then visit this following url, Then you see all the post we have created. Then open a post and hit a like button, then you will see the like is incremented.



Preview: all post page


Preview: Single post page  view


Generate some dummy data


To generate some dummy data, open PostFactory and paste below code


/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Post;
use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1


and then run below commad to generate fake data using faker.

php artisan tinker
//and then


Hope you enjoy this tutorial and hope it will work for you


Read also : Real Time Chat App with Laravel 6 Vue Js and Pusher


If you find any error please share with me, i will try to solve. That's it. 


#laravel #laravel-6 #vue-js #axios #like-system #example #tutorial