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) {
      $table->bigIncrements('id');
      $table->string('title');
      $table->string('slug');
      $table->unsignedBigInteger('user_id');
      $table->unsignedBigInteger('like')->default(0);
      $table->timestamps();
});

Now run php artisan migrate to migrate our table.

php artisan migrate

Step 4:  Setup Route

routes/web.php

//Like route
Route::get('post','PostController@index');
Route::get('post/{slug?}','PostController@show')->name('post');
Route::post('/like','PostController@getlike');
Route::post('/like/{id}','PostController@like');

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

app/Post.php

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

app/Https/Controller/PostController.php

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([
            'post'=>$post,
        ]);
    }
    public function like(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->like;
        $post->like = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }
}

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.

webpack.mix.js

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.

resources/assets/js/components/LikeComponent.vue

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

resources/assets/js/app.js

require('./bootstrap');

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.

resources/views/layouts/app.blade.php

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

resources/views/post/index.blade.php

resources/views/post/single.blade.php

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 
//or
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

database/factories/PostFactory.php

/** @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
factory(\App\Post::class,5)->create()
exit

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.