@aidex/admin-vue

@aidex/admin-vue

Installation

pnpm add @aidex/admin-vue @aidex/admin @aidex/admin-theme @aidex/connections @aidex/ai-control @aidex/observability vue

npm install @aidex/admin-vue @aidex/admin @aidex/admin-theme @aidex/connections @aidex/ai-control @aidex/observability vue

A single composable, useAdmin(controller), adapting @aidex/admin's AdminController to Vue. No business logic lives here — every read and command still goes through the same AdminController your application already constructed; this package only translates its existing subscribe()/getSnapshot() into a Vue ref.

Usage

import { AdminController } from '@aidex/admin';
import { useAdmin } from '@aidex/admin-vue';

// Create the AdminController exactly as in @aidex/admin's own docs — the
// same connectionManager/aiControl/observability instances your app
// already wired into Aidex.
const admin = new AdminController({ connectionManager, aiControl, observability });

export default {
  setup() {
    // snapshot is a Vue ref — read it, use it in templates, watch it.
    const snapshot = useAdmin(admin);

    function toggleAI() {
      // Commands are called directly on the controller — useAdmin never
      // wraps them.
      admin.setAIEnabled(!snapshot.value.aiControl.enabled);
    }

    return { snapshot, toggleAI };
  },
};

<template>
  <p>Health: {{ snapshot.health }}</p>
  <button @click="toggleAI">Toggle AI</button>
</template>

Rendering the AI Control Center

useAdmin() is state-only — it has no visual components, and won't grow any. The AI Control Center's actual dashboard (Overview, Executions, Routing, Guardrails, Connections, Providers, AI Control, Observability) already exists as a framework-neutral Custom Element, <aidex-control-center>, in @aidex/admin-elements. Vue hosts it directly rather than receiving a second, duplicate implementation:

pnpm add @aidex/admin-elements

Tell Vue's compiler that aidex-* tags are real custom elements, not unresolved Vue components (once, in your app's entry point — if you're on Vite, the equivalent option is vue()'s own template.compilerOptions.isCustomElement in vite.config.ts):

app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aidex-');

<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import { AdminController } from '@aidex/admin';
import { useAdmin } from '@aidex/admin-vue';
import '@aidex/admin-elements'; // registers <aidex-control-center> and friends

const admin = new AdminController({ connectionManager, aiControl, observability });

// Same admin instance the hosted element below also receives — one
// controller, one subscription per consumer, no second store.
const snapshot = useAdmin(admin);

const cc = useTemplateRef<HTMLElement & { controller?: AdminController }>('cc');
onMounted(() => {
  // `.controller` is a plain DOM property (a live object, not a string),
  // the same assignment `@aidex/admin-react`/`@aidex/admin-angular` use.
  cc.value!.controller = admin;
});
</script>

<template>
  <aidex-control-center ref="cc" />
</template>

useAdmin() remains available alongside the hosted element for any template binding that wants direct, Vue-native reactive access to AdminSnapshot (e.g. a custom header showing snapshot.health) without going through the Control Center's own UI.

Design notes

• No Context/provide-inject. controller is passed to useAdmin directly — there is no ambient Admin state to provide. AdminController remains the single source of truth.
• No snapshot-caching workaround. Unlike the React adapter (which must reconcile AdminController.getSnapshot()'s always-fresh-object design against React's referential-stability requirement), Vue's reactivity has no such constraint — this composable is a direct translation of subscribe()/getSnapshot().
• Controller replacement is supported: pass a ref/computed/getter instead of a plain AdminController and useAdmin will unsubscribe from the old controller and subscribe to the new one when it changes. If you hold the controller in a ref for this purpose, use shallowRef, not ref — see the doc comment on useAdmin for why.
• SSR-safe. AdminController.getSnapshot() is a synchronous in-memory read with no window/document access.
• New AdminSnapshot fields need no adapter change. useAdmin()'s returned ref carries the whole snapshot — snapshot.value.providers/ .executions are already available with zero changes to this package.