Vue - Commentify Pro

The installer writes resources/js/components/CommentThread.vue, publishes the SDK, and wires package.json. Finish with Vue and @vitejs/plugin-vue. Vue needs no exclude — the SDK ships compiled. Still avoid optimizeDeps.include for @commentify/*. See JavaScript.

import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [laravel({ /* … */ }), vue()],
});

Scaffolded wrapper

The generated CommentThread.vue wraps the SDK component so it renders the full thread out of the box. Props match React: type, id, sort, perPage, loginUrl, token, baseUrl, prefix, client, ui. type is the commentables alias, not a PHP class.

Mount in a Blade view

<div id="comments" data-type="articles" data-id="{{ $article->id }}"></div>

@vite('resources/js/comments.ts')

import { createApp } from "vue";
import CommentThread from "./components/CommentThread.vue";

const el = document.getElementById("comments");

if (el) {
  createApp(CommentThread, {
    type: el.dataset.type,
    id: Number(el.dataset.id),
  }).mount(el);
}

Mount in an Inertia page

<script setup lang="ts">
import CommentThread from "@/components/CommentThread.vue";

const props = defineProps<{ article: { id: number; title: string } }>();
</script>

<template>
  <h1>{{ article.title }}</h1>
  <CommentThread type="articles" :id="article.id" />
</template>

Vue uses a plugin rather than a React-style provider:

import { CommentifyClient } from "@commentify/core";
import { createCommentify } from "@commentify/vue";

createApp(App).use(createCommentify({ client: new CommentifyClient({ token }) }));

Inside a component tree you can also provideCommentifyClient(). Both <CommentThread /> and useCommentThread() pick it up. Connection props on a single thread override the shared client for that thread only.

Headless

The Vue hook nests state under one ref (state.comments, state.status). See Hooks.

Last modified on September 12, 2026