Knit UI Component with VueJS

Import the web component in your html file

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

```

📘

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

What’s Next