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 } from "vue";
import { mountSidebar } from "nav-schema";

const host = ref<HTMLElement | null>(null);
let dispose = () => {};

onMounted(() => {
  if (host.value) dispose = mountSidebar(host.value, { schema });
});
onBeforeUnmount(() => dispose());
</script>

<template><aside ref="host" /></template>

Bootstrap

main.ts

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

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