> ## Documentation Index
> Fetch the complete documentation index at: https://docs.commentify.pro/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Mount @commentify/vue in Blade or Inertia. Same UI contract as Livewire and React.

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](/javascript).

```js theme={null}
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

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

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

```ts theme={null}
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

```vue theme={null}
<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>
```

## Share one client

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

```ts theme={null}
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](/hooks).