Guides
Signup For Free

Knit UI Component with VueJS

Suggest Edits

Import the web component in your html file

Firstly we need to import the web component through JS file link using a 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script type="module" src="https://af1.getknit.dev/knit-ui-comp.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

📘

Make sure to import the web component script as a module

Make sure to include type="module" in the script tag.

Declare the web component in your application

Declare the component and attach functions for custom events emitted from the knit-auth component.

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      token: "",
    };
  },
  methods: {
    // Backend call to generate & get the authSessionToken
    onNewSession(e?: CustomEvent): void {
      // Hit the backend to generate authSessionToken
    e?.preventDefault();
    fetch('https://yourbackend.com/getSessionToken', {method:"GET"})
        .then((res) => res.json())
        .then((r) => {
          this.token = r.token;
        });
    },
    // Upon finishing the integration flow
    onFinish(event: Event): void {
      // integrationDetails is emitted through onFinish  custom event
      console.log((<CustomEvent>event)["detail"]["integrationDetails"]);
    },
    
    // Upon deactivate of integration
    onDeactivate(event: Event): void {
      // integrationDetails is emitted through onDeactivate  custom event
      console.log((<CustomEvent>event)["detail"]["integrationDetails"]);
    },
     
    // Upon closing of the knit-auth component
    onKnitClose(event: Event): void {
      console.log((<CustomEvent>event)["detail"]["knitClosed"]);
    },
  },
  mounted(): void {
    //Set the token once the component has mounted
    this.onNewSession();
  },
});
</script>

<template>
  <div>

    <knit-auth
      :authSessionToken="token"
      @onNewSession="onNewSession"
      @onFinish="onFinish"
      @onDeactivate="onDeactivate"
      @onKnitClose="onKnitClose"
      >
  <!-- Set skipIntro attribute to disable the introduction screen -->
  <!-- <knit-auth
      	skipIntro
        :authSessionToken="token"
    	  @onNewSession="onNewSession"
     	  @onFinish="onFinish"
 				@onDeactivate="onDeactivate"
        @onKnitClose="onKnitClose"
   > -->
      <button slot="trigger">Open Knit</button>
    </knit-auth>
  </div>
</template>

Add support for custom web components through application bundler

We need to specify how to identify the custom element in the application bundler's config.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      customElement: true,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag == "knit-auth",
        },
      },
    }),
  ],
});

// in webpack config
rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag == 'knit-auth'
      }
    }
  }
  // ...
]

Things to consider:

  • Pass any element ( preferably a button ) as a child to the knit-auth component, with a named slot trigger attribute. This element will open the knit-auth component when clicked.
  • Pass session token that you received from your backend in prop authSessionToken.
  • Assign functions to onNewSession, onFinish, onDeactivate and onKnitClose events emitted from the knit-auth component. onNewSession should call your backend to get a new auth session token, if need be.
  • If you want to disable the introduction screen, set skipIntro attribute to true.
  • Upon completion of the integration setup flow, an integrationDetails object is emitted through the onFinish event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon deactivation of the integration, an integrationDetails object is emitted through the onDeactivate event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon closing of the knit-auth component, onKnitClose event is emitted.

Updated about 1 year ago

What’s Next