Recipe

Vue integration

Use UI.getOrCreate in Vue lifecycle hooks and clean up capsule instances during unmount.

Host component

DropdownHost.vue

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { UI } from "tiny-engine-core";

const host = ref<HTMLElement | null>(null);
let instance: any = null;

const options = ref({ open: false });

onMounted(() => {
  if (!host.value) return;
  instance = UI.getOrCreate(host.value, "dropdown", options.value);
});

watch(options, (next) => {
  instance?.syncOptions(next);
}, { deep: true });

onBeforeUnmount(() => {
  instance?.destroy();
});
</script>

<template>
  <div ref="host">
    <button ref="trigger">Toggle</button>
    <div ref="menu" hidden>Vue + tiny-engine capsule</div>
  </div>
</template>

Bootstrap

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { UI } from "tiny-engine-core";
import Dropdown from "./dropdown";

UI.register("dropdown", Dropdown);
createApp(App).mount("#app");