Vue Component

To add the widget to a Vue 3 app, install @wexio/messenger-widget-vue. It is a thin reactive wrapper around the <wexio-widget> custom element. The runtime is the same as in every other delivery mode. Only where the Vue tree mounts differs.

Install

npm install @wexio/messenger-widget-vue
# or
yarn add @wexio/messenger-widget-vue

The peer dependency is vue ^3.3.0. The widget uses the host's Vue runtime.

Basic Usage

Render the component once, near the root of your app:

<script setup lang="ts">
import { WexioWidget } from "@wexio/messenger-widget-vue";
</script>

<template>
  <main>
    <!-- your app -->
    <WexioWidget public-key="pk_live_..." />
  </main>
</template>

The widget mounts a floating launcher and manages its own theme, locale, and state.

Build Configuration

Vue's template compiler warns about unknown DOM elements by default. Mark wexio-widget as a custom element so Vue doesn't try to resolve it as a component.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "wexio-widget",
        },
      },
    }),
  ],
});

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === "wexio-widget",
    },
  },
});

Props

Events

<template>
  <WexioWidget
    public-key="pk_live_..."
    @resize="onResize"
    @close="onClose"
  />
</template>

<script setup lang="ts">
function onResize(size: { width: number; height: number }) {
  console.log(size.width, size.height);
}
function onClose() {
  console.log("visitor closed the panel");
}
</script>

Identifying a Visitor

To identify a visitor, pass a user prop with one proof: a host-signed jwt (recommended), a Google FedCM googleIdToken, or the legacy userId + userHash pair. Use a reactive ref so the wrapper re-runs identify() when it changes. Pass null to log out.

<script setup lang="ts">
import { ref } from "vue";
import { WexioWidget, type VisitorIdentity } from "@wexio/messenger-widget-vue";

const user = ref<VisitorIdentity | null>({
  jwt: serverSignedJwt, // host-signed identity token (recommended)
  name: "Ada Lovelace",
  email: "ada@example.com",
});
</script>

<template>
  <WexioWidget public-key="pk_live_..." :user="user" />
</template>

See Authentication for how to produce a proof.

Server-Side Rendering

The wrapper renders an empty <wexio-widget> element on the server. The widget initialises on first client mount. Nuxt and other SSR setups need no special handling, because the custom element only runs in the browser.

Try It Live

The examples repo has a runnable Vue 3 + Vite example (reactive user ref, @resize / @close listeners, isCustomElement config). You can also configure the widget live in the Playground.

Related

• Authentication - produce a VisitorIdentity proof.
• Configure - theming, content, and behaviour.
• Web Component - the element this package wraps.
• Examples - runnable apps for every framework.