@ptahjs/admin-vue-vapor

Vue 3.6 (vapor / JSX) adapter for @ptahjs/admin-core. Bridges the framework-neutral Engine and its stores to Vue's reactivity, and ships the layout components and composable hooks that a Vue admin app needs.

Features

• ✅ createAdminApp(config) — Vue plugin that instantiates AdminApp (with framework: "vue" default), injects framework-level i18n (admin.* namespace), and optionally wires the auth-refresh strategy
• ✅ useEngineStore(store) — bridges any core store (router / auth / tabs / preferences / menu / ...) to a Vue ref; subscribes immediately (no timing gap) and auto-cleans up via onScopeDispose
• ✅ Composable hooks — useAdminEngine / useI18n / useMenus / useTabs / usePreferences / useAuth / useRouter / usePermissionConfig / useLoading / useNotify / usePermission
• ✅ Layout components — Admin, MenuTree, TabsBar, Breadcrumb, ErrorBoundary, LoadingBar, NotifyHost, AccessControl, ExceptionPage, EngineRouterView
• ✅ Access directive + global error handler — installed as part of createAdminApp
• ✅ Re-exports getEngine from @ptahjs/admin-core for convenience

Installation

pnpm add @ptahjs/admin-vue-vapor

Dependencies: @ptahjs/admin-core, vue (catalog), vue-jsx (catalog), @ptahjs/build.

Quick start

// main.js
import { createApp } from "vue";
import { createAdminApp } from "@ptahjs/admin-vue-vapor";
import { authApi, setAuthStrategy } from "./business/auth"; // your business layer
import modules from "./modules";

const app = createApp();
app.use(
    createAdminApp({
        modules,
        locale: "zh",
        session: { restore: async () => await fetch("/api/session").then((r) => r.json()) },
        menu: { fetch: async () => await fetch("/api/menus").then((r) => r.json()) },
        auth: { refresh: authApi.refresh, register: setAuthStrategy }, // optional
    }),
);
app.mount("#app");

<script setup>
import { useAuth, useMenus, useTabs } from "@ptahjs/admin-vue-vapor";

const auth = useAuth();
const menus = useMenus();
const tabs = useTabs();
</script>

<template>
    <Admin />
</template>

Components

| Component | Description | | ------------------ | ----------------------------------------------------------------------- | | Admin | Root admin shell — wires layout, route outlet, notify host, loading bar | | MenuTree | Sidebar menu tree | | TabsBar | Open tabs bar | | Breadcrumb | Current-location breadcrumb | | LoadingBar | Top loading bar bound to LoadingStore | | NotifyHost | Notification renderer bound to NotifyStore | | AccessControl | Permission-aware conditional render | | ExceptionPage | 403 / 404 / 500 render | | ErrorBoundary | Captures render errors in children | | EngineRouterView | Route outlet bound to engine.router |

Hooks

import {
    useAdminEngine,
    useI18n,
    useMenus,
    useTabs,
    usePreferences,
    useAuth,
    useRouter,
    usePermissionConfig,
    useLoading,
    useNotify,
    usePermission,
} from "@ptahjs/admin-vue-vapor";

All hooks are thin wrappers around useEngineStore(engine.<store>) plus selectors / actions. useEngineStore is the bridge — use it directly for any custom store:

import { useEngineStore, useAdminEngine } from "@ptahjs/admin-vue-vapor";

const engine = useAdminEngine();
const routerState = useEngineStore(engine.router); // Vue ref

Auth refresh wiring

admin-vue-vapor is a framework core package — it must not import your business auth layer. Instead, inject the refresh API from the host:

createAdminApp({
    auth: {
        refresh: authApi.refresh, // (token) => freshSession
        register: setAuthStrategy, // hook to mount your strategy
    },
});

When both are provided, admin-vue-vapor packages the "on refresh success → login, on failure → logout + notify" engine logic via buildAuthStrategy and hands it to your register. If auth is omitted, no refresh is wired.

License

MIT