---
metaTitle: PageModal component | AwesCode UI
meta:
  - name: description
    content: The <AwPageModal /> component renders a modal page overlay with multiple themes - UI Vue component for AwesCode UI.
title: PageModal
---

# AwPageModal

**Category:** Page | **Import:** Dynamic

The `AwPageModal` component provides a modal/dialog page overlay with multiple display themes: default (centered modal), fullscreen, and aside (side panel). It includes header, content area, and optional button footer.

## Overview

`AwPageModal` provides modal page display with:
- Three themes: default, fullscreen, aside
- Header with title, breadcrumb, and close button
- Scrollable content area
- Optional button footer
- Body scroll locking
- Click-outside-to-close support
- Back button integration
- Responsive design

## Usage

### Basic Example

```markup
<AwPageModal title="Edit User">
  <AwForm url="/api/users/1">
    <AwInput name="name" label="Name" />
    <AwInput name="email" label="Email" />
  </AwForm>
</AwPageModal>
```

### Fullscreen Theme

```markup
<AwPageModal
  title="Document Editor"
  theme="fullscreen"
  container="small"
>
  <AwMarkdownEditor v-model="content" />
</AwPageModal>
```

### Aside Theme (Side Panel)

```markup
<AwPageModal
  title="Filters"
  theme="aside"
  @close="$router.back()"
>
  <AwForm>
    <AwSelect name="category" label="Category" />
    <AwSelect name="status" label="Status" />
  </AwForm>
</AwPageModal>
```

### With Breadcrumb and Buttons

```markup
<AwPageModal
  title="Order Details"
  :breadcrumb="{ href: '/orders', title: 'Orders' }"
>
  <template #default="{ closeModal }">
    <OrderDetails :order="order" />
  </template>

  <template #buttons>
    <AwButton @click="saveOrder">Save</AwButton>
    <AwButton color="mono" @click="$router.back()">Cancel</AwButton>
  </template>
</AwPageModal>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| title | Modal title | `String` | `false` | `''` |
| breadcrumb | Breadcrumb object with href | `Object` | `false` | `null` |
| theme | Modal theme | `String` | `false` | `'default'` |
| container | Content container size (fullscreen only) | `String` | `false` | `null` |

**Theme Validator:** `'default'`, `'fullscreen'`, `'aside'`

**Container Options (fullscreen only):**
- `'small'` - Narrower content area
- `'full'` - Full-width content area
- `null` - Default width

**Breadcrumb Structure:**
```javascript
{
  href: String,  // Back link URL
  title: String  // Back button title (for aria-label)
}
```

Also inherits all props from `AwPage` component.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Modal content | `{ closeModal }` | - |
| headline-title | Custom title rendering | `{ title }` | Title text |
| headline-after-title | Content after title | - | - |
| buttons | Button footer area | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| close | - | Emitted when modal should close |

**Note:** If no `close` listener is provided, the component automatically calls `$router.back()` on close.

## Themes

### Default Theme

Centered modal overlay with backdrop:
- Centered on screen
- Click backdrop to close
- Medium-sized dialog
- Suitable for forms and small content

### Fullscreen Theme

Full-screen modal:
- Covers entire viewport
- No backdrop
- Container size options
- Suitable for editors and large content

### Aside Theme

Side panel that slides in from right:
- Appears on right side
- Backdrop with click-to-close
- Narrower than default
- Suitable for filters and sidebars

## Close Behavior

The modal can be closed by:
1. Click close button (×) in header
2. Click breadcrumb back arrow
3. Click outside modal (backdrop) - only in default/aside themes
4. Custom close handler via `@close` event

If no `close` event handler is provided, `$router.back()` is called automatically.

## Body Scroll Lock

The component automatically:
- Disables body scrolling when mounted
- Re-enables body scrolling when destroyed
- Reserves scrollbar gap to prevent layout shift

## Accessibility

- `role="dialog"` on modal container
- `role="document"` on dialog content
- Close button has `aria-label` and `title`
- Breadcrumb link has `aria-label`
- Tabindex management for focus

## Related Components

- `AwPage` - Base page component
- `AwModal` - Standard modal component
- `AwPageSingle` - Single page layout

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as page component
- Uses body-scroll-lock library to prevent background scrolling
- Inherits props from AwPage component (title, breadcrumb, container)
- Container prop only affects fullscreen theme
- Default theme shows centered modal dialog
- Aside theme slides in from right side
- Fullscreen theme uses AwIconSystemMono for icons
- Close button always visible in top-right
- Breadcrumb back arrow only shows if breadcrumb.href is provided
- Button footer (buttons slot) adds padding to content area