Vue Component

For Vue 3 hosts, install @wexio/messenger-widget-vue — a thin reactive wrapper around the underlying <wexio-widget> custom element. Same runtime as every other delivery mode; the only difference is where the Vue tree mounts.

Install

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

vue >= 3.3 is a peer dependency — the widget uses the host's Vue runtime.

Basic usage

<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 handles 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.

vite.config.js

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

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

nuxt.config.ts

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

On Vue CLI, do the same via chainWebpack → vue-loader → compilerOptions.isCustomElement.

Props

Prop	Type	Description
`public-key`	`string`	Your widget's public key (`pk_live_…`). Omit for demo mode.
`locale`	`string`	UI locale (BCP-47, e.g. `"en"`, `"pt-BR"`, `"uk"`). Overrides the operator's `localeStrategy`.
`prefill-name`	`string`	Unverified prechat prefill.
`prefill-email`	`string`	Unverified prechat prefill.
`prefill-phone`	`string`	Unverified prechat prefill.
`user`	`VisitorIdentity \| null`	Known-visitor identity proof. Pass `null` to log out.

Events

Event	Payload	When
`resize`	`{ width: number; height: number }`	Panel dimensions changed (open ↔ closed).
`close`	—	The visitor closed the panel.

<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

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.

SSR

The wrapper renders an empty <wexio-widget> element on the server; the widget initialises on first client mount. No special handling is needed for Nuxt or other SSR setups — the custom element only runs in the browser.

Try it live

A runnable Vue 3 + Vite example (reactive user ref, @resize / @close listeners, isCustomElement config) is in the examples repo — open it on StackBlitz or CodeSandbox.

Authentication — produce a VisitorIdentity proof.
Configure — theming, content, and behaviour.
Examples — runnable apps for every framework.

Vue Component

On this page