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.
We're adding our group chat component to your Vue app using out UIKit.
Want to see how it looks? Well, you're in luck - you can try it out right here with all the bells and whistles.
We need the backend URL and an API key to communicate with Weavy.
compilerOptions. You should set the compilerOptions.isCustomElement option to check if the tag names start with wy-.vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith("wy-")
}
}
}),
],
})
npm install @weavy/uikit-webcurl WEAVY_URL/api/users -H "Authorization: Bearer ********************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"WEAVY_URL and Bearer ******************** with your backend URL and API key.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.
curl -X POST WEAVY_URL/api/users/USER_ID/tokens -H "Authorization: Bearer ********************"WEAVY_URL and Bearer ******************** with your backend URL and API key.This will return an access token - copy and use it below.
Issuing an access token using Curl is for demo purposes only. Access tokens should be created from your backend; read more about authentication and access tokens here.
import { createApp } from "vue";
import App from "./App.vue";
import { Weavy } from "@weavy/uikit-web";
const weavy = new Weavy();
weavy.url = "WEAVY_URL";
weavy.tokenFactory = async (refresh) => "*******ACCESSTOKEN*******";
const app = createApp(App);
app.provide("weavy", weavy);
app.mount("#app");
WEAVY_URL and *******ACCESSTOKEN******* with your backend URL and issued access token.<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>
To use the component simply import it and use it in a template.
.vue file
<script setup>
import { WeavyChat } from './WeavyChat.vue'
</script>
<template>
<WeavyChat uid="vue-chat" />
</template>We need an API key to communicate with Weavy for authentication, etc
Get answers faster with our tailored generative AI. Learn more about how it works
This is a custom LLM for answering your questions. Answers are based on the contents of the documentation and this feature is experimental.
You're not signed in to your Weavy account. To access live chat with our developer success team you need to be signed in.