Frameworks
Vue

Using Weavy with Vue.js

Vue plays nice with custom elements, so you can install the Weavy UIKit in your Vue projects with npm just as normal. But additionally you also need to configure your project to allow the Weavy web components.

Prerequisites

A Weavy environment.
A token endpoint in your backend that can provide an access_token for your authenticated user.
Vue 3.

Configure Vue project

First of all you should setup a Vue.js project. If you already have a Vue project you can skip this step. Otherwise we recommend following the official Vue quick start as there are several build options and configurations to choose from when setting up a Vue project.

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 an may be defined both in runtime and in compile-time compiler options. If you are using .vue component files you most likely need a compile-time configuration. 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-")
        }
      }
    }),
  ],
})

// main.js
import { createApp } from "vue";
import App from "./App.js";

const app = createApp(App);

// Only works if using in-browser compilation.
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("wy-");

app.mount("#app");

See Vue and Web components for more information and configuration examples.

Install the Weavy UIKit

Next, install the Weavy UIKit.

npm install @weavy/uikit-web

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.

import { createApp } from "vue";
import App from "./App.vue";

import { Weavy } from "@weavy/uikit-web";

const weavy = new Weavy();
weavy.url = "{WEAVY-URL}";
weavy.tokenUrl = "https://example.com/myapp/token";

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

Create components

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

export default {
  data() {
    return {
      style: {
        "--wy-theme-color": "green",
      },
    };
  },
  inject: [
    "weavy"
  ],
  props: [
    "uid"
  ],
  template: `
    <wy-chat :uid :style></wy-chat>
  `,
};

Use the Vue component

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

<script setup>
  import { WeavyChat } from './WeavyChat.vue'
</script>

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

import WeavyChat from './WeavyChat'

export default {
  components: {
    WeavyChat
  },
  template: `
      <WeavyChat uid="test-chat" />
    `
}

Voilà! Now you have a chat component to integrate anywhere in your Vue app! You can of course perform the same steps for any other component you need, such as Posts, Files or the Messenger.

Tutorials and more

For additional info and tutorials on using Weavy with Vue you should also visit our technology page on Vue.