Knit Webapp

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 8 months ago

What’s Next