@colosoft/admin-template-vue

Vue 3 + PrimeVue shell, page patterns and form helpers of the Colosoft admin template.

import '@colosoft/admin-template-tokens/tokens.css';
import '@colosoft/admin-template-vue/style.css';
import { createAdminApp } from '@colosoft/admin-template-vue';

createAdminApp({ modules: [myModule] }).then((admin) => admin.mount('#app'));

Main exports: createAdminApp, defineAdminModule, useService, useAuth, useTheme, useUnsavedChanges, useBreadcrumbTitle, useNotify, useConfirmAction, primeVueLocales, AdminShell, ListPage, DetailPage, DangerZone, ConfirmTypedDialog, SecretOnceDialog, CopyIdButton, StatusPill, UserAvatar, PropertyPanel, PageHeader, EnvBadge, avatarTone, avatarInitials, useZodForm, zodFormResolver.

DetailPage takes tabs: DetailTab[] (key, label, to, optional group) and navigation?: 'auto' | 'tabs' | 'sidebar' (default 'auto'). auto shows a grouped section sidebar (a "Section" select below 1024 px) when there are more than 5 tabs or any tab has a group, and horizontal tabs otherwise. header-layout="record" (also PageHeader layout="record") puts the id with copy (record-id), the status and tags above the title and the actions below it; the aside slot places a PropertyPanel on the right from 1200 px and below the content on narrow screens.

ListPage also takes status-filters ({ value, label, variant, count }) with v-model:status, active-key for the open row and sync-url (search q, status, page and sort in the query string). With selectable, the bulk bar replaces the search bar, the header checkbox is indeterminate on partial selection, Shift+click selects a range and Esc clears the selection.

createAdminApp also takes userManagerSettings (extra OIDC options), http (query serializer, timeoutMs) and primeVueLocales (overrides); the PrimeVue locale follows the app language. ListPage loaders may return { items, total }, { items, hasMore } or { items, lastPage }; ListColumn takes class and align for header and cells.

style.css imports primeicons/primeicons.css; the JavaScript entry point has no CSS import and loads in plain Node.

Peer dependencies: vue, vue-router 4, primevue 4.5, @primeuix/themes 2, @tanstack/vue-query 5. Define __VUE_I18N_FULL_INSTALL__: true, __VUE_I18N_LEGACY_API__: false and __INTLIFY_PROD_DEVTOOLS__: false in your Vite config. License: MIT.