Vue Client SDK

Use @chimekit/vue to embed the ChimeKit inbox, feed, preferences, and bell in your Vue 3 app. APIs match the React SDK.

Setup

Install and add styles:

npm install @chimekit/vue

import "@chimekit/vue/styles.css";
// Tailwind (optional): if you want utilities to override ChimeKit styles,
// use your global CSS instead:
// @import "@chimekit/vue/styles.css" layer(components);

Tailwind users can keep the JS import. Use the layered @import only when you want Tailwind utilities to override ChimeKit styles.

Wrap member-facing widgets with the root provider:

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

const publicKey = import.meta.env.VITE_CHIMEKIT_PUBLIC_KEY!;
const props = defineProps<{ memberToken: string }>();
</script>

<template>
  <ChimeKitRoot
    :publicKey="publicKey"
    :token="props.memberToken"
    :audienceMember="{ id: 'user_123' }"
  >
    <!-- widgets -->
  </ChimeKitRoot>
</template>

Provider setup and auth

ChimeKitRoot requires:

• publicKey (your ChimeKit public key)
• audienceMember (the logged-in user, at minimum { id: string })
• either token or getToken

Optional props include baseUrl and onAuthError. baseUrl defaults to https://api.chimekit.com/member/v1.

audienceMember supports optional fields: displayName, email, externalUserId, avatarUrl, and traits.

Dynamic token example:

<script setup lang="ts">
import { ChimeKitRoot, Inbox } from "@chimekit/vue";

const getToken = async () => {
  const response = await fetch("/api/chimekit/token");
  if (!response.ok) {
    throw new Error("Failed to fetch ChimeKit token");
  }
  const data = await response.json();
  return data.token;
};
</script>

<template>
  <ChimeKitRoot
    publicKey="ck_pub_..."
    :audienceMember="{ id: 'user_123' }"
    :getToken="getToken"
    :onAuthError="(error) => console.error('ChimeKit auth error', error)"
  >
    <Inbox variant="popover" />
  </ChimeKitRoot>
</template>

Client access

Use the composable to access the member client, public key, token, and audience member. useChimeKit returns a Ref, so access values via computed:

import { computed } from "vue";
import { useChimeKit } from "@chimekit/vue";

const chimekit = useChimeKit();
const client = computed(() => chimekit.value.client);

Components

The components below are exported from @chimekit/vue.

Inbox

Use case: all-in-one bell + feed + preferences + message details.

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

<template>
  <Inbox variant="popover" primaryColor="#2563eb" />
</template>

Key props (what they do):

• variant: choose presentation ("popover", "modal", "drawer").
• width, maxFeedHeight: size constraints for the container and feed.
• primaryColor: override the accent/brand color.
• onActionCallback(actionId): callback when a CTA uses the callback kind.
• labels: override built-in copy (title, tabs, preferences title).
• bellProps, feedProps, messageDetailsProps, preferencesProps: forward props to internal subcomponents.
• classes: slot-level class overrides for styling.

Feed

Use case: standalone message list with pagination/actions.

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

<template>
  <Feed :type="['unread', 'read']" :maxFeedHeight="480" />
</template>

Key props (what they do):

• type / category: filter messages.
• showCategory: show category labels in the list.
• onMarkRead / onMarkUnread / onArchive / onUnarchive: side-effects or analytics.
• onActionCallback: callback for CTA actions of kind callback.
• onMessageClick: called when a row is clicked (receives message object).
• renderMessage / renderEmpty / renderLoading / renderError: custom renderers.
• classes: slot styling overrides.
• maxFeedHeight: constrain feed height.

Render overrides:

• renderMessage(props): props include message, index, action handlers, onActionCallback, and forceArchivedActions.
• renderEmpty(), renderLoading(), renderError(error: string): replace built-in states.

MessageDetails / MessageDetailsDialog

Use case: render a single notification body + actions.

<script setup lang="ts">
import { MessageDetails } from "@chimekit/vue";
const onAction = (id: string) => console.log(id);
</script>

<template>
  <MessageDetails messageId="msg_123" :displaySnippet="true" :onActionCallback="onAction" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { MessageDetailsDialog } from "@chimekit/vue";

const open = ref(true);
const selectedId = ref("msg_123");
const onAction = (id: string) => console.log(id);
</script>

<template>
  <MessageDetailsDialog
    :open="open"
    :onOpenChange="(v: boolean) => (open = v)"
    :messageId="selectedId"
    :onActionCallback="onAction"
  />
</template>

Key props:

• messageId (required)
• displaySnippet: show snippet above body.
• maxHeight: scroll constraint.
• sanitizeHtml: customize the HTML sanitizer for message bodies.
• onActionCallback: callback for CTA actions of kind callback.
• renderLoading / renderError: override states.
• classes: slot styling.

Render overrides:

• renderLoading()
• renderError(error: string)

Preferences / PreferencesDialog

Use case: member notification channel/category settings.

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

<template>
  <Preferences />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PreferencesDialog } from "@chimekit/vue";

const open = ref(false);
</script>

<template>
  <PreferencesDialog :open="open" :onOpenChange="(v: boolean) => (open = v)" />
</template>

Key props:

• renderLoading / renderError / renderSuccess / renderEmpty / renderAccessDenied: override states.
• classes: table/row/checkbox/button styling.

Render overrides are zero-arg functions except renderError(message: string) and renderSuccess(message: string).

Bell

Use case: standalone trigger (works without root).

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

<template>
  <Bell :unread="3" size="md" @click="() => console.log('open inbox')" />
</template>

Key props:

• unread: boolean or count.
• size: "sm" | "md" | "lg".
• onClick: click handler.
• renderIcon / renderUnreadDot: override icon or unread indicator.
• classes: slot styling.

Render overrides:

• renderIcon() for a custom SVG/icon component.
• renderUnreadDot(unread: boolean | number) for custom indicator.

Types

Useful types exported from @chimekit/vue:

• ChimeKitAudienceMember
• ChimeKitClient
• ChimeKitFetcherOptions
• ChimeKitInboxFilters
• ChimeKitProviderProps
• ChimeKitAction, ChimeKitCallbackAction, ChimeKitLinkAction