README

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

License

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

glebred / laravel-vue-simple-comments

Maintainers

Details