Blade — Usage

Comment box by `page_id`

html

@php
    $pageId = 'post-'.$post->id;
@endphp

<x-blade-comments-box :pageId="$pageId" />

Alias:

html

<x-blade-comments::box :pageId="$pageId" />

Comment box on an Eloquent model

Whitelist the class in config/vgcomment.php:

php

'allowed_commentable_types' => [
    \App\Models\Post::class,
],

Then:

html

<x-blade-comments-box :commentable="$post" />

Minimal page

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @commentBladeStyles
</head>
<body>
    <x-blade-comments-box pageId="blog-1" />

    @commentBladeScripts
</body>
</html>

How it works

The Blade component loads existing comments via CommentService.
Replies are nested with nestReplies() so the thread follows parent_id (not a flat list under the root only).
It embeds JSON config (apiBase, CSRF, guest flags, context, reaction suggestions, …).
comments.js talks to /{prefix}/api for create/update/react/upload.

You do not need Livewire, Alpine, or Echo for the Blade UI.

Composer & Markdown

The top composer posts a root comment. Toolbar actions wrap the selection with Markdown markers (bold **…**, italic *…*). The core formatter soft-normalizes common spacing typos (for example **bold **) so emphasis still renders; fenced/code spans are left unchanged.

Uploads (two paths)

Control	Result
Paperclip (attach file)	File is uploaded and kept as an attachment chip. Sent with the comment and listed under it.
Insert image / paste / drop on the textarea	File is uploaded, then a Markdown image `![…](url)` is inserted into the content.

Images already embedded in Markdown are not duplicated as attachment chips in the rendered comment.

Replies

Click Reply on a comment to open an inline composer under that comment (primary UX). The reply is posted with the correct parent_id / root_id. Nested threads indent recursively for deep conversations.

Emoji & reactions

Composer emoji button: full picker inserts emoji at the cursor.
React on a comment: full picker (not only the six quick types). The API stores any emoji string up to 32 characters.
reaction_types in config is a UI suggestion list only — see Configuration.

Multiple boxes

Use different pageId (or models) per instance:

html

<x-blade-comments-box pageId="section-a" />
<x-blade-comments-box pageId="section-b" />

Admin

Same core admin as Livewire apps: Admin panel.

Blade — Usage ​

Comment box by page_id ​

Comment box on an Eloquent model ​

Minimal page ​

How it works ​

Composer & Markdown ​

Uploads (two paths) ​

Replies ​

Emoji & reactions ​

Multiple boxes ​

Admin ​

Blade — Usage

Comment box by `page_id`

Comment box on an Eloquent model

Minimal page

How it works

Composer & Markdown

Uploads (two paths)

Replies

Emoji & reactions

Multiple boxes

Admin