Ana içeriğe geç

Vue.js Kurulumu

Vue 3 uygulamalarında @aithinks/chatbot-widget-element (Web Component) paketi kullanılır.

Custom element adı: chatbot-widget

Kurulum​

npm install @aithinks/chatbot-widget-element

Attributes​

AttributeTipZorunluAçıklama
appidstringEvetWidget uygulama kimliği (küçük harf)

1. Custom element’i Vue derleyicisine tanıtın​

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. Paketi giriş dosyasında import edin​

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

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

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

3. Bileşende kullanın​

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

Sık karşılaşılan durum​

“Failed to resolve component: chatbot-widget” — isCustomElement yapılandırması eksiktir; Vite veya Vue CLI ayarını kontrol edin.

Sonraki adımlar​