Blocks

Login

A login block with split layout (image + form) and MeLoginForm.

Usage

Use the MeLogin block to create a two-column login page: one panel for an image (or custom content) and one for the login form. Place MeLoginForm (or any form) inside the default slot.

Loading preview...

<template>
  <MeLogin image-side="left">
    <MeLoginForm
      title="Sign in"
      description="Enter your credentials to continue."
    />
  </MeLogin>
</template>

Image Side

Control which side the image panel appears on with the imageSide prop.

<template>
  <MeLogin image-side="right">
    <MeLoginForm title="Sign in" />
  </MeLogin>
</template>

Custom Image Slot

Use the #image slot to replace the default image with custom content.

<template>
  <MeLogin>
    <template #image>
      <div class="flex h-full items-center justify-center bg-linear-to-br from-primary-500 to-primary-700 text-white">
        <p>Your custom content</p>
      </div>
    </template>
    <MeLoginForm title="Sign in" />
  </MeLogin>
</template>

API

Props

Prop	Default	Type
`imageSide`	`'left'`	`'left' \| 'right'` Which side the image panel is on.
`imageSrc`	`''`	`string` Default image URL when not using the `#image` slot.
`imageAlt`	`'Login'`	`string` Alt text for the default image.

Slots

Slot	Type
`default`	`void`
`image`	`void`

Sub-components

Component	Description
`LoginImage`	Image panel (left or right), supports `#image` slot.
`LoginFormPanel`	Form column with default slot for form content.

Header

A complete header block with navigation, branding, and user profile.

setupI18n

Configure internationalization (i18n) support for EletroDS components.