Vue Adapter

npm install @livechat/widget-vue

<script src="http://unpkg.com/@livechat/widget-core@1.4.0"></script>
<script src="https://unpkg.com/@livechat/widget-vue@1.4.0"></script>

<script lang="ts" setup>
  import { TextWidget, EventHandlerPayload } from "@livechat/widget-vue"

  function handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
    console.log("TextWidget.onNewEvent", event)
  }
</script>

<template>
  <TextWidget
    organizationId="614fe72f-3319-43c6-9ae6-c410c65df230"
    visibility="maximized"
    v-on:new-event="handleNewEvent"
  />
</template>

<script setup>
  import { useWidgetState } from "@livechat/widget-vue";
  const widgetState = useWidgetState();
</script>

<template>
  <div v-if="widgetState">
    <span>{{widgetState.availability}}</span>
    <span>{{widgetState.visibility}}</span>
  </div>
</template>

<script setup>
  import { useWidgetIsReady } from "@livechat/widget-vue";
  const isWidgetReady = useWidgetIsReady();
</script>

<template>
  <div>
    <span>Chat Widget is</span>
    <span v-if="isWidgetReady">loaded</span>
    <span v-else>loading...</span>
  </div>
</template>

<script setup>
  import { useWidgetChatData } from "@livechat/widget-vue";
  const chatData = useWidgetChatData();
</script>

<template>
  <div v-if="chatData">
    <span>{{chatData.chatId}}</span>
    <span>{{chatData.threadId}}</span>
  </div>
</template>

<script setup>
  import { useWidgetGreeting } from "@livechat/widget-vue";
  const greeting = useWidgetGreeting();
</script>

<template>
  <div v-if="greeting">
    <span>{{greeting.id}}</span>
    <span>{{greeting.uniqueId}}</span>
  </div>
</template>

<script setup>
  import { useWidgetCustomerData } from "@livechat/widget-vue";
  const customerData = useWidgetCustomerData();
</script>

<template>
  <div v-if="customerData">
    <span>{{customerData.id}}</span>
    <span>{{customerData.isReturning}}</span>
    <span>{{customerData.status}}</span>
    <ul>
      <li v-for="variable in customerData.sessionVariables">{{variable}}</li>
    </ul>
  </div>
</template>