1. Frameworks
2. Vue

Using Weavy with Vue.js

Vue plays nice with custom elements, so you can use UIKit Web in your Vue apps with ease.

Prerequisites

• A Weavy environment.
• An 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 move on to configure custom elements. 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 UIKit Web

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 = "https://myenvironment.weavy.io";
weavy.tokenUrl = "https://myserver.example/api/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="vue-chat" />
</template>

import WeavyChat from './WeavyChat'

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

Voilà! Now you have a chat component to integrate anywhere in your Vue app! You can of course create additional components for other building blocks, such as Posts, Files or the Messenger.