Skip to main content

Vue.js Setup

Vue 3 apps use @aithinks/chatbot-widget-element (Web Component).

Custom element name: chatbot-widget

Install​

npm install @aithinks/chatbot-widget-element

Attributes​

AttributeTypeRequiredDescription
appidstringYesWidget application ID (lowercase)

1. Register the custom element with the Vue compiler​

Vite + Vue (vite.config.ts):

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'chatbot-widget',
        },
      },
    }),
  ],
});

Vue CLI (vue.config.js):

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          isCustomElement: (tag) => tag === 'chatbot-widget',
        },
      }));
  },
};

2. Import the package in the entry file​

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import '@aithinks/chatbot-widget-element';

createApp(App).mount('#app');

3. Use it in a component​

<script setup lang="ts">
const appId = 'YOUR_APP_ID';
</script>

<template>
  <chatbot-widget :appid="appId" />
</template>

Options API:

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

export default defineComponent({
  name: 'App',
  data() {
    return {
      appId: 'YOUR_APP_ID',
    };
  },
});
</script>

<template>
  <chatbot-widget :appid="appId" />
</template>

Common issue​

“Failed to resolve component: chatbot-widget” — isCustomElement is missing; check your Vite or Vue CLI config.

Next steps​