PageIntegrations Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Integrations and API keys page. Slots: filters, connections, keys, webhooks.

Import

Vue

import { UiPageIntegrations } from '@ziyarago/ui-pro/vue'

Default

Integrations and API keys

Section

Filters slot

Connections slot

API keys slot

Webhooks slot

Vue

<UiPageIntegrations title="Integrations and API keys" subtitle="Section">
  <template #filters>Filters slot</template>
  <template #connections>Connections slot</template>
  <template #keys>API keys slot</template>
  <template #webhooks>Webhooks slot</template>
</UiPageIntegrations>

API reference

Integrations template: connection cards, API keys and webhooks.

Props

PropType and valuesDefaultDescription

titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.

subtitlestring—Caption under the heading.

crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.

actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).

filtersSearchInput, FilterChips.

connectionsIntegrationCard grid.

keysKeys; DataTable with CopyButton and IconButton.

webhooksWebhooks list; Card, Switch, Chip.

Notes

Place inside AppShell; fill only the slots you need.
Keys and webhooks share a row and wrap on narrow screens.