---
metaTitle: PageSingle component | AwesCode UI
meta:
  - name: description
    content: The <AwPageSingle /> component renders a single entity page with header, content, and optional preview panel - UI Vue component for AwesCode UI.
title: PageSingle
---

# AwPageSingle

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

The `AwPageSingle` component provides a page layout for displaying single entities (user profile, document view, product details, etc.) with a sticky header, content area, optional preview panel, and action button support.

## Overview

`AwPageSingle` provides single-entity page layout with:
- Sticky page header with breadcrumb
- Title and description display
- Content area with optional preview panel
- Mobile/desktop responsive layouts
- Fixed action button on mobile
- Progress indicator support
- Scroll-based sticky behavior
- Container size options

## Usage

**⚠️ Essential: Always use `layout: 'empty'`**

Every page using `AwPageSingle` must include `layout: 'empty'` in the component export:

```javascript
export default {
    layout: 'empty',  // Required for AwPageSingle pages
    // ... rest of component
}
```

### Basic Example

```markup
<template>
  <AwPageSingle title="John Doe" description="User Profile">
    <AwCard>
      <h3>Personal Information</h3>
      <!-- user details -->
    </AwCard>
  </AwPageSingle>
</template>

<script>
export default {
  layout: 'empty'
}
</script>
```

### With Preview Panel

```markup
<AwPageSingle
  title="Invoice #12345"
  description="Draft invoice"
  :breadcrumb="{ href: '/invoices', title: 'Invoices' }"
>
  <!-- Main content -->
  <AwForm url="/api/invoices/12345">
    <AwInput name="customer" label="Customer" />
    <AwInput name="amount" label="Amount" />
  </AwForm>

  <!-- Preview panel -->
  <template #preview>
    <InvoicePreview :invoice="invoice" />
  </template>
</AwPageSingle>
```

### Preview Slot Patterns

We have two standard patterns for the `#preview` slot depending on the entity type:

#### Human Pattern (Users, Customers)

Used for people. Displays a large avatar and the person's name.

```markup
<template #preview>
    <AwCard class="text-center">
        <AwAvatar
            :src="user.avatar"
            :name="userName"
            size="240"
            class="mx-auto"
        />
        <AwHeadline class="mt-4">
            {{ userName }}
        </AwHeadline>
    </AwCard>
</template>
```

#### Item Pattern (Services, Products, Locations)

Used for non-human entities with an image. Displays a large image with rounded corners.

```markup
<template #preview>
    <AwCard style="--card-padding-x: 0.5rem; --card-padding-y: 0.5rem;">
        <AwActionIcon
            :size="380"
            :image="item.image ? { src: item.image, alt: item.name } : null"
            icon="awesio/image"
            icon-color="mono-400"
            color="mono-800"
            class="w-full"
            style="--icon-size: 48px; --radius: 0.5rem;"
        />
        <AwHeadline class="p-4 mt-2">
            {{ item.name }}
        </AwHeadline>
    </AwCard>
</template>
```

### With Action Button

```markup
<AwPageSingle
  title="Document"
  :action="{ text: 'Save', icon: 'awesio/check', color: 'accent' }"
  @action="saveDocument"
>
  <AwMarkdownEditor v-model="content" />
</AwPageSingle>
```

### With Custom Container

```markup
<AwPageSingle
  title="Wide Content"
  container="full"
>
  <AwTable :data="items" />
</AwPageSingle>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| title | Page title | `String` | `false` | `''` |
| description | Description text (mobile only) | `String` | `false` | `''` |
| headerDescription | Description in header (desktop) | `String` | `false` | `''` |
| breadcrumb | Breadcrumb configuration | `Object` | `false` | `null` |
| headerProgress | Progress value (0-100) | `Number` | `false` | `null` |
| action | Action button configuration | `Object` | `false` | `null` |
| container | Container size type | `String` | `false` | `null` |
| desktopFrom | Breakpoint for desktop layout | `String` | `false` | `'lg'` |
| reverse | Reverse content/preview order | `Boolean` | `false` | `false` |
| hideMenu | Hide page menu | `Boolean` | `false` | `false` |

**Breadcrumb Structure:**
```javascript
{
  href: String,  // Back link URL (optional, defaults to $router.back())
  title: String  // Back button aria-label
}
```

**Action Button Structure:**
```javascript
{
  text: String,      // Button text
  icon: String,      // Icon name
  color: String,     // Button color
  before: Boolean,   // Show before menu on desktop
  // ... any other AwButton props
}
```

**Container Options:**
- `'default'` - Standard container with max-width
- `'full'` - Full-width fluid container
- `null` - Custom preview-based layout

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main content area | - | - |
| preview | Preview panel (right side on desktop) | - | - |
| breadcrumb | Custom breadcrumb content | - | Back button |
| after-breadcrumb | Content after breadcrumb | - | - |
| buttons | Additional buttons in header | - | - |
| after-menu | Content after page menu | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| action | - | Emitted when action button is clicked |

## Layout Behavior

### Desktop (lg+)

- Sticky header with title and action button
- Content and preview side-by-side (if preview slot used)
- Action button in header (position based on `action.before`)
- Description shown in header if `headerDescription` provided

### Mobile

- Title in header when scrolled (hidden at top)
- Content and preview stacked vertically
- Fixed floating action button at bottom
- Description shown below header if `description` provided
- Action button sticky at bottom

## Container Types

### Default Container

Standard centered container with max-width:
```markup
<AwPageSingle container="default">
```

### Full Container

Full-width fluid container:
```markup
<AwPageSingle container="full">
```

### Preview Container (null)

Custom two-column layout with preview:
```markup
<AwPageSingle :container="null">
  <div>Content</div>
  <template #preview>Preview</template>
</AwPageSingle>
```

## Scroll Behavior

The component uses IntersectionObserver to track:
- Header sticky state (when scrolled past top)
- Action button sticky state on mobile

Scroll marks are placed at top and bottom of content to detect visibility.

## Reverse Layout

Use `reverse` prop to swap content/preview order:
```markup
<AwPageSingle reverse>
  <div>Main content</div>
  <template #preview>Preview (shows on left)</template>
</AwPageSingle>
```

## Header Progress

Show progress indicator in header:
```markup
<AwPageSingle
  title="Document"
  :header-progress="75"
>
```

Progress bar appears in header, useful for multi-step forms or loading states.

## Related Components

- `AwPage` - Standard page component
- `AwPageHeader` - Page header component (used internally)
- `AwPageModal` - Modal page component
- `AwPageMenuButtons` - Page menu buttons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as page component
- Uses `pageMixin` for common page functionality
- Sets body class `aw-page-single-noty` for notification positioning
- Automatically handles responsive breakpoints
- Preview panel only shows if preview slot is used
- Action button placement differs between mobile/desktop
- Back button uses `$router.back()` if no breadcrumb.href provided
- IntersectionObserver for scroll detection
- Supports Nuxt head() for body attributes
- Header stickiness based on scroll position
- Mobile action button animates based on bottom visibility