PageAuth

Full-screen auth page. Slots: background, logo, aside, form, footer; props: title, subtitle, layout (card or split).

Import

Vue

import { UiPageAuth } from '@ziyarago/ui/vue'

Card

ZiyaraGo

Sign in

Welcome back to ZiyaraGo

Form slot

Footer slot

Vue

<UiPageAuth title="Sign in" subtitle="Welcome back to ZiyaraGo">
  <template #logo>ZiyaraGo</template>
  <template #form>Form slot</template>
  <template #footer>Footer slot</template>
</UiPageAuth>

Split

ZiyaraGo

Sign in

Welcome back to ZiyaraGo

Form slot

Vue

<UiPageAuth
  layout="split"
  title="Sign in"
  subtitle="Welcome back to ZiyaraGo"
>
  <template #logo>ZiyaraGo</template>
  <template #aside>Aside slot</template>
  <template #form>Form slot</template>
</UiPageAuth>

API reference

Sign-in page template without the app shell, as a centered card or a split layout.

Props

PropType and valuesDefaultDescription

layoutcardsplit'card''split' uses AuthSplit with a side panel; anything else renders a centered AuthLayout card over the background.

titlestring—Form heading.

subtitlestring—Text under the heading.

Slots

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

backgroundDecorative glows behind the card; card layout only.

logoLogo above the heading.

asideBrand panel on the left; split layout only, hidden below 820 px.

formSign-in fields and button; LoginForm, TextField, PasswordInput, CodeInput, Button.

footerLinks such as help, create account, back to login.

Notes

Designed for the dark theme and used without AppShell.