Vue 3

Tell Vue the tag is a custom element so it stops resolving it as a Vue component. Then bind normally — Vue sets DOM properties for bound objects and @event listens to CustomEvents.

Runtime compiler (`main.ts`)

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

const app = createApp(App);
app.config.compilerOptions.isCustomElement = tag => tag === 'mildport-import';
app.mount('#app');

Vite + `@vitejs/plugin-vue` (templates compile at build time)

import vue from '@vitejs/plugin-vue';

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

Component

<script setup lang="ts">
import { onMounted } from 'vue';
import { defineImportSuiteElement, type AppliedDetail } from '@capitality-io/mildport-widget';

const targets = [
  {
    id: 'contact',
    label: 'Contact',
    fields: [{ key: 'person.email', label: 'Email', required: true, columnType: 'email' }],
  },
];

onMounted(() => {
  void defineImportSuiteElement();
});

const onApplied = (e: CustomEvent<AppliedDetail>) => {
  console.log(e.detail.recordId);
};
</script>

<template>
  <mildport-import
    api-base-url="https://imports.your-infra.example"
    :license-key="licenseKey"
    :targets="targets"
    @import-applied="onApplied"
  />
</template>

:targets="targets" binds the catalog as a property; @import-applied listens to the DOM event.

Next: Configure · Events · all frameworks