Vue

@qirtaas/vue wraps @qirtaas/core’s mount API in two components: <QirtaasEditor> and <QirtaasRenderer>. Vue 3 is a peer dependency — the wrapper shares your app’s Vue.

npm install @qirtaas/vue

QirtaasEditor

<script setup lang="ts">
import { ref } from "vue";
import { QirtaasEditor } from "@qirtaas/vue";
import type { SaveState } from "@qirtaas/vue";

const editor = ref<InstanceType<typeof QirtaasEditor> | null>(null);
const saveState = ref<SaveState>("idle");

async function getToken() {
  const res = await fetch("/api/qirtaas-token", { method: "POST" });
  const { token } = await res.json();
  return token;
}
</script>

<template>
  <!-- The editor fills its container — give it a bounded height. -->
  <div style="height: 70vh">
    <QirtaasEditor
      ref="editor"
      :get-token="getToken"
      locale="ar"
      theme="light"
      @document-created="(id) => saveIdSomewhere(id)"
      @save-state-change="(s) => (saveState = s)"
    />
  </div>
</template>

The editor owns an internal scroll view (pinned toolbar, scrolling body) and fills its container — the parent element must give it a bounded height (e.g. a sized dialog body or h-[60vh]).

Props

Props mirror EditorMountOptions, plus the connection config (the wrapper creates its client internally):

() => Promise<string> | string

required

Returns a short-lived embed token. Called on init, before expiry, and on 401. See Authentication.

string

default:"https://api.qirtaas.io"

Qirtaas API base URL.

string

Existing document to load. Omit to lazy-create on first edit (the documentCreated event delivers the new id).

Json | null

Initial content (TipTap JSON) when not loading from a documentId.

"en" | "ar"

"light" | "dark"

boolean

default:"false"

boolean

AutosaveOptions

See Types. Set { enabled: false } and call save() on the template ref to drive persistence yourself.

Events

Each editor callback is emitted as a Vue event:

Event	Payload
`@ready`	—
`@change`	`json: Json`
`@save-state-change`	`state: SaveState`
`@document-created`	`id: string`
`@error`	`code: ErrorCode, detail?: unknown`
`@token-expired`	—
`@event`	`name: string, props?: Record<string, unknown>`

Live updates vs. remount

The component mounts the editor once (onMounted). Only two props are watched after mount:

theme — forwarded to setTheme
readOnly — forwarded to setEditable

Changing anything else (documentId, getToken, locale, …) requires a remount — give the component a :key that changes with them:

<QirtaasEditor :key="docId" :document-id="docId" :get-token="getToken" />

Exposed methods

Available on the template ref:

Json | null

Current editor content (TipTap JSON).

Promise<void>

Force an immediate save of pending changes.

void

QirtaasRenderer

Read-only display. Supply exactly one auth source — share-token, get-token, or get-signature (see Renderer auth modes).

<QirtaasRenderer
  :document-id="docId"
  :get-signature="() => fetchSignature(docId)"
  locale="ar"
  theme="light"
  @error="(code) => report(code)"
/>

Props

string

default:"https://api.qirtaas.io"

string

Document to render. With shareToken, the token resolves the document.

Public read.

() => Promise<string> | string

Own-document read (embed token).

() => Promise<{ signature: string; exp: number }>

Cross-user read (per-document HMAC signature).

"en" | "ar"

"light" | "dark"

Events: @ready, @error. The template ref exposes setTheme(theme). As with the editor, only theme is live — remount (via :key) for anything else.

Imperative client operations

For mount-less operations (e.g. driving a document list view), the package re-exports the client:

import { createQirtaasClient } from "@qirtaas/vue";

const qirtaas = createQirtaasClient({ getToken: fetchEmbedToken });
const docs = await qirtaas.listDocuments(); // [{ id, title, … }]
await qirtaas.deleteDocument(id);

Get started

Tutorials

SDK

Auth

Self-hosting

AI

QirtaasEditor

Props

Events

Live updates vs. remount

Exposed methods

QirtaasRenderer

Props

Imperative client operations

​QirtaasEditor

​Props

​Events

​Live updates vs. remount

​Exposed methods

​QirtaasRenderer

​Props

​Imperative client operations

QirtaasEditor

Props

Events

Live updates vs. remount

Exposed methods

QirtaasRenderer

Props

Imperative client operations