Simple comments plugin for Laravel Inertia Vue stack

Preview

This package allows you to add comments to your Laravel Inertia Vue stack application. The comment form is implemented using TS and Daisy UI which is a kit of UI components for Tailwind CSS. I made it because I needed a simple comment form for my project. I hope it will be useful for you too.

Requirements

• inertiajs/vue3
• Daisy UI,
• Tailwind
• Vue-toastification

npm i @inertiajs/inertia-vue3
npm i tailwindcss
npm i vue-toastification
npm i daisyui

Installation

You can install the package via composer:

composer require glebred/laravel-vue-simple-comments

Publish the view

php artisan vendor:publish --provider="GlebRed\LaravelVueSimpleComments\LaravelVueSimpleCommentsServiceProvider"

This will create a

• Vue view: resources/js/vendor/laravel-vue-simple-comments/Comments.vue
• Also a migration database/migrations/create_comments_table.php
• Model app/Models/Comment.php
• Request app/Http/Requests/CommentRequest.php
• Resource app/Http/Resources/CommentResource.php

Call the comments section in your Vue component:

Import the component import CommentForm from "@/vendor/laravel-vue-simple-comments/Comments.vue"; and use it in your template, for example:

<CommentForm :commentable="answer" :commentable_type="'answers'"></CommentForm>

Where commentable is the object you want to comment on, and commentable_type is the model name.

Usage

Implement abstact class LaravelVueSimpleComments in your controller. Here is an example:

use GlebRed\LaravelVueSimpleComments\Requests\CommentRequest;
use GlebRed\LaravelVueSimpleComments\LaravelVueSimpleComments;

class CommentsController extends LaravelVueSimpleComments
{

    public function store(CommentRequest $request)
    {
        $validated = $request->validated();

        $this->authorize('create', [Comment::class, $validated['commentable_id'], $validated['commentable_type']]);

        Comment::create([
            'commentable_id' => $validated['commentable_id'],
            'commentable_type' => $validated['commentable_type'],
            'user_id' => $request->user()->id,
            'body' => $validated['body'],
        ]);
        return back()->with('flash', [
            'message' => 'Comment added successfully!',
        ]);
    }

    public function destroy(Comment $comment)
    {
        $this->authorize('delete', $comment);

        $comment->delete();

        return back()->with('flash', [
            'message' => 'Comment deleted successfully!',
        ]);
    }
}

After that add routes to your web.php file:

<?php
use App\Http\Controllers\MyCommentsController;

Route::post('/comments', [MyCommentsController::class, 'store']);
Route::delete('/comments/{comment}', [MyCommentsController::class, 'destroy']);
?>

Don't forget to use this trait in your model:

use GlebRed\LaravelVueSimpleComments\Traits\HasComments;

class News extends Model
{
    use HasComments;
}

And then add comments to your content resource, for example:

class NewsResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
        return [
            //...
            //order by latest first
            'comments' => CommentResource::collection($this->comments()->orderBy('created_at', 'desc')->get()),
        ];
    }
}

Testing

npm test

Wishlist:

• Likes
• Replies

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email gleb.redko@gmail.com instead of using the issue tracker.

Credits

• Gleb Redko
• All Contributors

License

The MIT License (MIT). Please see License File for more information.