formkit.config.ts

import { defaultConfig } from '@formkit/vue'
import { de, en, fr, it } from '@formkit/i18n'

import { generateClasses } from '@formkit/themes'
import { genesisIcons } from '@formkit/icons'
import genesis from '@formkit/themes/tailwindcss/genesis'
import type { FormKitClasses } from '@formkit/core'

import { createProPlugin, datepicker, mask } from '@formkit/pro'

// main.js or formkit.config.ts
const proPlugin = createProPlugin('KEY, {
  datepicker,
  mask
})

export const formkitConfig = defaultConfig({
  locales: { de, fr, it, en },
  locale: 'en',
  icons: {
    ...genesisIcons
  },
  config: {
    classes: generateClasses(genesis) as Record<string, FormKitClasses | string | Record<string, boolean>>
  },
  plugins: [proPlugin]
})

index.html

    <Deep-Pay></Deep-Pay>
    <script type="module" src="/src/main.ts"></script>

Main.ce.vue

<script lang="ts">
import App from './App.vue'
import { defineCustomElement, createApp, h, getCurrentInstance } from 'vue'

import { plugin as formkit } from '@formkit/vue'
import { formkitConfig } from './formkit.config'

import styles from './assets/style.css?inline'
import pro from './../node_modules/@formkit/pro/genesis.css?inline'

export default defineCustomElement({
  styles: [
    `
      :host {
        all: initial;
        display: block;
      }
    `,
    styles,
    pro
  ],
  setup() {
    const app = createApp(App)

    app.use(formkit, formkitConfig)

    const inst = getCurrentInstance()
    if (inst) {
      Object.assign((inst as any).appContext, app._context)
      Object.assign((inst as any).provides, app._context.provides)
    }
  },
  render() {
    return h(App)
  }
})
</script>

main.ts

import DeepPay from './Main.ce.vue'
customElements.define('deep-pay', DeepPay)