Like Dislike Features in Laravel 7 using Vue Js

In this tutorial i am going to show you how we can create laravel like dislike system using vue js. I will show you step by step how to make a like feature in laravel with vue js. If you don't know how to use vue js in laravel, then this tutorial is for you.

From this tutorial you will learn how to use vue js in laravel and how you can create like dislike feature in laravel vue application. I will teach you from scratch. You can like one post without page refresh. Cause here i wll use vue js and when we hit like button then i will send ajax request to serve. 

I will create a Question model and a Vue component to write our all vue js code. Here i will use axios get request to get data and axios post request to send request to server. Hope you will enjoy this. 

Preview:

laravel-vue-js-like-dislike-feature

Step 1: Install Laravel 

As i will show you like dislike feature in laravel from scratch so you have to download fresh laravel app. To download it, run below command.

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

 

Step 2: Make auth

Only logged in user can like a post. So we have to make auth in our app. 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. So run below command.

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 Question model

php artisan make:model Question -m

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

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateQuestionsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('questions', function (Blueprint $table) {
            $table->id();
            $table->string('title')->unique();
            $table->string('slug')->unique();
            $table->string('description');
            $table->integer('user_id');
            $table->integer('like')->default(0);
            $table->integer('dislike')->default(0);
            $table->integer('view_count')->default(0);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('questions');
    }
}

Now run php artisan migrate to migrate our table.

php artisan migrate

 

Step 4:  Setup Route

We need route to create like dislike system in laravel using vue js. So paste below code.

routes/web.php

//Like and disliek route
Route::post('/like','LikeController@hit_like')->name('like');
Route::get('/like/{id}','LikeController@load_all_like');
Route::post('/dislike','LikeController@hit_dislike')->name('dislike');
Route::get('/dislike/{id}','LikeController@load_all_dislike');

 

Step 5:  Setup Model

Now open Question 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

app/Question.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Question extends Model
{
    protected $guarded = [];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function getRouteKeyName()
    {
       return 'slug';
    }
}

 

app/User.php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;
   
    protected $guarded = [];

    public function questions()
    {
        return $this->hasMany(Question::class);
    }

    public function getRouteKeyName()
    {
       return 'username';
    }
}

 

Step 6:  Setup Controller

We need two controller. One for show question to user and other for ask question and like dislike. So paste below code in two controller.

app/Https/Controller/LikeController.php

namespace App\Http\Controllers\User;

use App\Question;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class LikeController extends Controller
{
   public function __construct()
   {
       $this->middleware('auth');
   }

   public function hit_like(Request $request)
   {  
      $question = Question::findOrFail($request->id);
      $question->like = $question->like + 1;
      $question->save();
     
      return response()->json([
          "success" => "Thanks!"
      ]);
   }

   public function load_all_like($id)
   {
     $question = Question::findOrFail($id);

        return response()->json([
            "question" => $question
        ]);
   }

   public function hit_dislike(Request $request)
   {  
      $question = Question::findOrFail($request->id);
      $question->dislike = $question->dislike + 1;
      $question->save();

      return response()->json([
          "question" => $question
      ]);
   }

   public function load_all_dislike($id)
   {
     $question = Question::findOrFail($id);

        return response()->json([
            "question" => $question
        ]);
   }

}

 

Step 7:  Change app.js file

Now we need to setup our all vue configuration. To do it follow below instruction carefully.

npm install

 

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

resources/js/components/LikeComponent.vue

 

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

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');


//component

Vue.component('like-component', require('./components/likeComponent.vue').default);


const app = new Vue({
    el: '#app',
});

 

Step 8:   Create View 

Now we are in final step. Just we need to create our view file to show like dislike button. So let's doit in the following path.

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

resources/views/layouts/app.blade.php

 

Now we have to show our single question page. To show single question, paste below code in the followng pasth.

resources/views/single.blade.php

 

Everything is ok now. You just need to create question and show this question in a single page. After showing in a single page, just paste this like component below content. Hope you understand. You can follow git repo from here. Like Dislike system laravel vue js.

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

npm run dev 
//or
npm run watch

Read also : Laravel Vue Js Form Submit With Validation Using V-form Package

Hope it can help you.