Core
Lazy loading
Load admin components on demand with defineAsyncComponent.
Core loads its field widgets and dashboard widgets on demand. Your layer should do the same. The code stays out of the entry chunk, and the admin starts faster.
Register with defineAsyncComponent
Register the components of these registry fields with plain defineAsyncComponent:
contentFieldWidgetsdashboardWidgetssettingsPanelsmailPanelsadminBanners
const RecentPostsWidget = defineAsyncComponent(() => import('../components/RecentPostsWidget.vue'))
Do not register a bare
() => import() loader. Core cannot tell it from a functional component.Keep the default suspensible: true.
Skeletons
Core wraps each registered component in its own <Suspense>. It shows a skeleton while the chunk loads:
| Place | Skeleton |
|---|---|
PlutoContentField | PlutoSkeletonField, a label line and an input bar. It is taller for richtext and media. |
PlutoDashboardWidgets | PlutoSkeletonWidget, a card of fixed height for each colSpan |
| Settings parent page | PlutoSkeletonWidget with variant="panel" |
| Admin layout | An empty fallback. A banner never blocks the layout. |
PlutoContentForm also shows one skeleton for each field while an item loads.
What stays eager
The navbar actions (navbarActions) stay eager on purpose.
Pages are files, so Nuxt splits them. The lazy rule does not apply to them.
Development warning
In development, definePlutoExtension logs a console.warn once for each component that is not async. The check runs in development only, so production has no cost.