UI

@scrape-admin/ui is a Nuxt module that registers shared components and composables used across Scrape Admin's Nuxt apps. It depends on @nuxt/ui and nuxt-monaco-editor, and builds on @scrape-admin/schema / @scrape-admin/web-schema types.

Setup

Add the module to an app's nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@scrape-admin/ui'],
})

Components under runtime/components/global are registered globally (no import needed); components under runtime/components (for example AppPageHeader and AdminPageHeader) are available but not global. Composables under runtime/composables are auto-imported.

Form inputs

Several components are designed to be used as AutoFormPrimitive/AutoForm inputs via a Zod schema's meta().input.component, matching the component names referenced in @scrape-admin/web-schema (for example CollectionSelect, ProfileSelect, IconInput, and CronExpressionInput on CreateCollectionSchema):

• CollectionSelect / ProfileSelect — searchable selects for existing collections and profiles.
• IconInput — picks an Iconify icon (e.g. for a collection's icon field).
• CronExpressionInput — validates and previews a cron expression.
• UrlInput, TagInput, DateInput, MoneyInput, CurrencyInput, IntervalInput, SwitchToggle, TeamMemberRoleInput — typed inputs for their respective value types.
• ProfileActionsInput, ProfileBlockInput, ProfileElementsInput — structured editors for a profile's actions and elements.
• MonacoCodeEditor — a Monaco code editor, used by ProfileYamlEditor to edit a profile as raw YAML.

Other components

• AppPageHeader / AdminPageHeader — consistent page headers for the app and admin sections.
• ConfirmDialog — a confirmation modal, opened via the useConfirmDialog composable rather than directly.

Composables

const confirm = useConfirmDialog()

const confirmed = await confirm({
  title: 'Delete collection?',
  description: 'This cannot be undone.',
  confirmText: 'Delete',
})

useConfirmDialog opens a ConfirmDialog through useOverlay() and resolves to true/false based on the user's choice.