---
metaTitle: LayoutCenter component | AwesCode UI
meta:
  - name: description
    content: The <AwLayoutCenter /> is a centered layout for authentication and standalone pages for AwesCode UI.
title: LayoutCenter
---

# AwLayoutCenter

**Category:** Layout | **Import:** Dynamic

The `AwLayoutCenter` component is a centered layout designed for authentication pages, standalone forms, and centered content. It provides a centered frame with optional logo and background.

## Overview

`AwLayoutCenter` provides a centered layout with:
- Centered content frame
- Optional logo display
- Background image support
- Dark theme support
- Footer copyright text
- Responsive design

## Usage

### Nuxt Page (Recommended)

For Nuxt pages, use the `layout` property in your component options:

```markup
<template>
    <AwCard class="max-w-md mx-auto">
        <template #title>
            <AwHeadline>Sign In</AwHeadline>
        </template>

        <form @submit.prevent="onLogin">
            <AwGrid>
                <AwInput
                    v-model="formData.email"
                    name="email"
                    label="Email"
                    type="email"
                    required
                />

                <AwPassword
                    v-model="formData.password"
                    name="password"
                    label="Password"
                    required
                />

                <AwButton type="submit" size="lg" class="w-full">
                    Sign In
                </AwButton>
            </AwGrid>
        </form>
    </AwCard>
</template>

<script>
export default {
    layout: 'center',

    data() {
        return {
            formData: {
                email: '',
                password: ''
            }
        }
    },

    methods: {
        onLogin() {
            // Handle login
        }
    }
}
</script>
```

### Component Usage

For non-Nuxt contexts or custom layouts, use the component directly:

```markup
<AwLayoutCenter>
    <AwCard>
        <h1>Login</h1>
        <AwForm url="/api/login">
            <!-- form fields -->
        </AwForm>
    </AwCard>
</AwLayoutCenter>
```

### With Custom Container

```markup
<AwLayoutCenter>
    <template #container>
        <div class="custom-container">
            <slot />
        </div>
    </template>
</AwLayoutCenter>
```

## API

### Props

This component does not have props. Logo and background are managed via Vuex store and config.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main content | - | - |
| container | Custom container wrapper | - | Default centered container |

### Events

This component does not emit custom events.

### Config Options

Background and logo can be configured in `awes.config.js`:

```javascript
export default {
  _config: {
    default: {
      background: {
        src: '/path/to/background.jpg',
        // ... other background styles
      }
    },
    dark: {
      background: {
        src: '/path/to/dark-background.jpg'
      }
    }
  }
}
```

## Related Components

- `AwLayoutProvider` - Layout provider component (used internally)
- `AwLayout` - Default layout with sidebar

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a layout
- **For Nuxt pages:** Use `layout: 'center'` in component options instead of wrapping with `<AwLayoutCenter>`
- The Nuxt layout system automatically wraps your page content with `AwLayoutCenter`
- Logo is retrieved from Vuex store (`awesIo` module)
- Background image is configured via `$awes._config`
- Background changes based on dark theme state
- Logo is hidden on mobile (`hidden sm:block`)
- Footer copyright text is automatically displayed
- Content frame is centered with max-width
- Component uses `AwLayoutProvider` for layout structure
- Suitable for login, registration, and standalone pages