<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">

Vue

Get started

Add Weavy to your Vue app

This tutorial will show how to add Weavy to your Vue app using our UIKit, built with web components. The final product will be our chat component rendered in your app.

Have your project ready, and let's get started.

1. Weavy API Key

We need the backend URL and an API key to communicate with Weavy.

2. Configure custom elements

To be able to use web components properly in Vue, you need to define which custom elements to allow. This is done in your compilerOptions. You should set the compilerOptions.isCustomElement option to check if the tag names start with wy-.
Add this to vite.config.js 
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("wy-")
        }
      }
    }),
  ],
})

3. Install UIKit Web

Run this in your terminal 
npm install @weavy/uikit-web

4. Create a demo user

For this tutorial, we're creating a demo user, and for that, we need a display name (what the end user sees) and a unique identifier.
Now it's time to create the user in Weavy through the API using Curl with the information provided.
Copy and paste this into a terminal window and run it 
curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"

5. Issue access token

For our chat component to know who we're rendering for, we must issue an access token that we'll pass on to the UIKit.

Copy and paste this into a terminal window and run it 
curl -X POST WY_BACKEND_URL/api/users/USER_ID/tokens -H "Authorization: Bearer WY_API_*****************"

This will return an access token - copy and use it below.

6. Configure Weavy as a provider

Configure Weavy at app-level to avoid multiple configurations. If you want to access the Weavy instance from your components, you can provide it in the app and inject it in your components.
Add this to main.js 
import { createApp } from "vue";
import App from "./App.vue";
import { Weavy } from "@weavy/uikit-web";

const weavy = new Weavy();
weavy.url = "WY_BACKEND_URL";
weavy.tokenFactory = async (refresh) => "USER_ACCESS_TOKEN";

const app = createApp(App);
app.provide("weavy", weavy);
app.mount("#app");

7. Create component

Create a WeavyChat.vue component 
<script setup>
  import { inject } from 'vue'

  inject('weavy')

  defineProps({
    uid: String
  })
</script>

<style scoped>
  wy-chat {
    --wy-theme-color: green;
  }
</style>

<template>
  <wy-chat :uid="uid"></wy-chat>
</template>

8. Use the Vue component

To use the component simply import it and use it in a template.

Add this to any .vue file 
<script setup>
  import { WeavyChat } from './WeavyChat.vue'
</script>

<template>
  <WeavyChat uid="vue-chat" />
</template>

9. Done!

Voilà! Now you have a chat component to integrate anywhere in your Vue app.
On this page
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account