Vue app

The administration is a Vue 3 application. Components referenced from fields, buttons and layouts are loaded from the component directories. This page covers the API available to them.

Registering components

Components added to window.crudadmin.components become global components. Load the script with the scripts configuration, or build it with Vite in your project.

resources/js/admin.js

const components = import.meta.glob('./components/**/*.vue', { eager: true });

for (const path in components) {
    const name = path.split('/').pop().replace('.vue', '');

    window.crudadmin.components[name] = components[path].default;
}

Global components named AppLogo and RightNavbarSlot fill the logo and the top navbar. All places for your own components are listed in Slots.

Initial data

The admin calls GET /admin/api/bootstrap on every document load. A complete Pinia cache renders the previous administration while this request runs in the background. The shell renders the admin-app-hash meta tag only for a verified session; the cache is used only when it was stored for that same hash. A missing cache, a guest shell or a changed app hash shows the bootstrap loader. This also applies in development. The JSON store object binds to Pinia by store id through Response from @crudadmin/helpers.

app contains the CSRF token and public logo used on the login screen and sidebar. The local appStore.boot tracks readiness, loading, errors and project component registration.
auth contains session status and the configuration needed for login. The user is returned only after verification. Provider choices are exposed to guests only when manual selection is required.
locale binds to the existing useLocaleStore() from @crudadmin/helpers/store. Its translations contains the gettext catalog: guests and pending-2FA sessions receive only bundled authentication messages and no content languages; verified admins receive the full admin catalog, including project translations.
setting is returned only for a fully verified admin. useSettingStore() holds model trees/maps, versions, environment, author/copyright, paths, filemanager, statistics, dashboard, editor configuration and private assets. Pinia persists it with the last verified identity, locale and public logo in local storage scoped to the bootstrap URL. CSRF tokens and boot flags are not persisted.

Cached identity and permissions are provisional: session expiry, pending verification and permission changes take effect when the fresh bootstrap arrives. Logout and detected session loss clear private state and its cache. Server authorization still applies to every request. Uncommitted development changes do not change app_hash; background bootstrap still refreshes their data. If revalidation fails due to a network/server error, the cached screen remains visible and a later refreshApp() can retry. Call await useAppStore().refreshApp() to refresh all sections. Pass ['setting'], ['auth'] or ['locale'] for a subset; every response also contains the minimal app, identity and locale data. Requesting setting as a guest or before 2FA completes is forbidden. Session changes reset private stores and close their UI; an identity change during a partial refresh requires a full bootstrap. Login and successful verification return bootstrap data in the authentication response. The client binds it, loads private assets, registers project components and navigates through Vue Router without reloading the admin document. JSON logout also clears private state without a reload. An explicit login redirect outside the admin still navigates away. boot.ready === true means cached or fresh bootstrap data and required assets are ready; it does not confirm that background session verification has completed. boot.componentsLoaded means project components are registered. The local useLocaleStore().current getter selects the interface language from useSettingStore().languages. Editor flags are settingStore.editor.gettext and settingStore.editor.modelSettings. window.crudadmin.components remains the registration API; configuration/session getters have been removed. Configured scripts/styles and the meta/scripts slots are loaded from cached or fresh private bootstrap assets, including after SPA login. Register project components when your script executes: a script loaded after login must not rely solely on the document’s already completed load event. Scripts should initialize idempotently across sessions and asset updates. External script URLs are loaded once per document; use versioned URLs when their content changes. Slot initialization runs for each session/locale or changed asset markup. The admin installs CrudadminVue from @crudadmin/helpers after Pinia. This shared plugin follows locale.translations and replaces the catalog, so logout removes private messages. There is no inline catalog or window.CATranslates in the admin shell. Before bootstrap completes, the loader uses its source text. The editor on public pages loads its restricted configuration from /admin/api/frontend-editor/bootstrap, using its session or Sanctum authentication. Publish matching resources assets with the PHP changes.

Session events

A project script runs once per document, but admins log in and out without a reload. Listen to two window events to keep your own state in step with the session:

crudadmin:session-start fires once a verified session is ready, including the first document load. event.detail.user is the logged admin.
crudadmin:session-end fires when that session is gone: logout, a different admin logging in, or a lost session.

Clear your own stores and stop your timers on crudadmin:session-end, otherwise the next admin sees the previous admin’s data. Persisted Pinia stores keep it in local storage too.

resources/js/app.js

let refreshInterval = null;

const startSession = () => {
    if (refreshInterval) {
        return;
    }

    loadProjectData();
    refreshInterval = setInterval(loadProjectData, 1000 * 60 * 5);
};

const endSession = () => {
    clearInterval(refreshInterval);
    refreshInterval = null;

    useProjectStore().$reset();
};

window.addEventListener('crudadmin:session-start', startSession);
window.addEventListener('crudadmin:session-end', endSession);

// The first session may have started before this script ran
startSession();

Models

Every admin model is available in the model tree loaded with the administration.

// new model instance from the model tree
const orders = reactive(getFreshModel('orders').initialize());

// model already rendered on the page
const school = getActiveModel('schools');

Model events

on() accepts one event or a list and returns a function which removes the listener.

const off = model.on(['create', 'update', 'delete'], () => reloadCalendar());

onUnmounted(off);

model.fields.date_from.on('change', (value) => {
    // ...
});

Event	Payload
`create`, `onCreate`	created row
`update`, `onUpdate`	updated row
`submit`, `onSubmit`	row after create or update
`delete`, `onDelete`	removed ids, only from the default delete button
`fetched`	model after the first rows request
`buttonActionFire`	`{ rows }` returned by a button
`form.open` / `form.close`	opened row or `null`
`destroy`	model removed from the page
field `change` / `change.row`	new value / value loaded from the row

Modals and toasts

Modal and Toast are available as window.Modal and window.Toast, and every admin model can open its own form in a modal through model.modals. See Modals and toasts.

Stores

useSettingStore().models; // all models

Getting started

Upgrade guide

Admin interface

Validation

Frontend

Website

Registering components

Initial data

Session events

Models

Model events

Modals and toasts

Stores

​Registering components

​Initial data

​Session events

​Models

​Model events

​Modals and toasts

​Stores

Registering components

Initial data

Session events

Models

Model events

Modals and toasts

Stores