Getting Started with Weavy Web Components in Vue at Runtime

Integrate Weavy components at runtime in your Vue application using in-browser compilation.

Step 1: Weavy API Key

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

First, sign up for an account

Before you can work with Weavy, you'll need to sign up for a free account or sign into your existing account.

Then, select your environment and API key to proceed with the tutorial. The API key will be automatically applied to all code snippets below.

Step 2: Configure Custom Elements

To use web components properly in Vue, you need to define which custom elements to allow at runtime.

Define this in your 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");

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

Step 3: Install UIKit Web

Run this in your terminal:

npm install @weavy/uikit-web

Step 4: Create a Demo User

For this tutorial, we're creating a demo user. We need a display name (what the end user sees) and a unique identifier.

This is what shown for the end user in title bars, search results for users, etc.

A unique identifier for the user - cannot contain whitespace and must contain at least one non-digit.

Now create the user in Weavy through the API using curl:

curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"

Notes:

Replace WY_BACKEND_URL with the URL to your Weavy backend
Replace WY_API_***************** with an API key for your Weavy backend
Replace USER_ID with the id of the Weavy user
Replace USER_NAME with the name of the Weavy user

You can find this information in your Weavy account.

Note: Creating a user through curl is purely for demo purposes. Users created in Weavy should be done from your backend using the user API endpoints.

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

Notes:

Replace WY_BACKEND_URL with the URL to your Weavy backend
Replace WY_API_***************** with an API key for your Weavy backend
Replace USER_ID with the id of the Weavy user

Note: 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.

Step 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 your main.js:

import { createApp } from "vue";
import App from "./App.js";
import { Weavy } from "@weavy/uikit-web";

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

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");

Notes:

Replace WY_BACKEND_URL with the URL to your Weavy backend
Replace USER_ACCESS_TOKEN with an access token for the Weavy user

You can find this information in your Weavy account.

Step 7: Create a Component

Create a WeavyChat.js component:

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

Step 8: Use the Vue Component

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

Add this to any of your .js files:

import WeavyChat from './WeavyChat'

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

Done!

Voilà! Now you have a chat component to integrate anywhere in your Vue app. Start building amazing collaboration features today!