@truplexy/vue

@truplexy/vue

The Truplexy chat widget for Vue 3 and Nuxt. It wraps @truplexy/web.

npm i @truplexy/vue

You also need the server route the widget talks to. See @truplexy/server.

Vue

<script setup lang="ts">
import { TruplexyChat } from "@truplexy/vue";
</script>

<template>
  <RouterView />
  <TruplexyChat endpoint="/api/truplexy" @status="(s) => console.log(s)" />
</template>

Or register it everywhere with app.use(TruplexyPlugin).

Nuxt

<!-- app.vue -->
<script setup lang="ts">
import { TruplexyChat } from "@truplexy/vue";
</script>

<template>
  <NuxtPage />
  <ClientOnly>
    <TruplexyChat endpoint="/api/truplexy" />
  </ClientOnly>
</template>

The route goes in server/api/truplexy.post.ts:

import { createHandler } from "@truplexy/server";
const truplexy = createHandler({ chatKey: process.env.TRUPLEXY_CHAT_KEY });
export default defineEventHandler((event) => truplexy(toWebRequest(event)));

Props and events

• Props are the same as the element's attributes: endpoint, heading, subtitle, greeting, placeholder, accent, avatar, theme, position, mode, show-sources, demo, details, storage-key. There are also open, which controls the panel when set, and labels.
• Events: @open, @close, @message, @status, @error.
• Template ref: exposes open(), close(), toggle(), send(text), reset().

Your own UI

import { useTruplexyChat } from "@truplexy/vue";

const { state, setCustomer, cancelDetails, send, handoff, retry, reset, setOpen } = useTruplexyChat({ endpoint: "/api/truplexy" });
// state.value.customer, needsDetails, profile, ticket, messages, sending, offerHandoff, escalated, unread, error

With details: 'ask' (the default), collect a name/email and call setCustomer(name, email) before sending. When state.value.needsDetails is true, preserve the draft, set the details, then send(draft) again. Use details: 'off' for a server customer(request) resolver. Names allow 120 characters; customer linking errors stop a new identified chat.

reset() retains customer details. Remount with isolated storage on account changes; the server must enforce authorization. See customer identity, types and errors.

MIT licensed.