---
metaTitle: LayoutProvider component | AwesCode UI
meta:
  - name: description
    content: The <AwLayoutProvider /> is a layout provider that manages navigation menus and provides context for all layouts in AwesCode UI.
title: LayoutProvider
---

# AwLayoutProvider

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

The `AwLayoutProvider` component is the base layout provider that manages navigation menus from Vuex store and provides layout context to child components. It serves as the foundation for all other layout components.

## Overview

`AwLayoutProvider` provides layout management with:
- Menu management from Vuex store (mainMenu, secondaryMenu, userMenu, tertiaryMenu)
- Active menu item detection based on current route
- Menu transformation with permissions checking
- Provides layout context via Vue provide/inject
- Offline notification display
- Translation support for menu items
- Route-based active item highlighting

## Usage

### Basic Example

```markup
<AwLayoutProvider>
  <div>Your layout content</div>
</AwLayoutProvider>
```

### Used by Other Layouts

```markup
<!-- AwLayout uses AwLayoutProvider internally -->
<template>
  <AwLayoutProvider class="aw-layout">
    <AwLayoutMenu v-if="$screen.lg" />
    <AwHeaderNotification />
    <slot />
  </AwLayoutProvider>
</template>
```

### Accessing Layout Context

```markup
<script>
export default {
  inject: ['layoutProvider'],

  computed: {
    mainMenu() {
      return this.layoutProvider.mainMenu
    },

    activeMenuItem() {
      return this.layoutProvider.activeMenuItem
    }
  }
}
</script>
```

## API

### Props

This component does not have props. All menu data comes from Vuex store.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Layout content | - | - |

### Events

This component does not emit custom events.

### Provided Context

The component provides a `layoutProvider` object via Vue's provide/inject API:

```javascript
{
  mainMenu: Array,         // Transformed main menu items
  secondaryMenu: Array,    // Transformed secondary menu items
  userMenu: Array,         // Transformed user menu items
  tertiaryMenu: Array,     // Transformed tertiary menu items
  activeMenu: Object,      // Currently active top-level menu item
  activeMenuItem: Object   // Currently active menu item (including nested)
}
```

### Menu Item Structure

Menu items are transformed from Vuex store with this structure:

```javascript
{
  text: String,            // Translated menu item text
  subtitle: String,        // Translated subtitle (optional)
  description: String,     // Translated description (optional)
  href: String,            // Link URL
  icon: String,            // Icon name
  iconBg: String,          // Icon background color
  iconActive: String,      // Active icon name
  class: String,           // Custom CSS class
  expanded: Boolean,       // Expanded state
  target: String,          // Link target (_blank, etc.)
  rel: String,             // Link rel attribute
  listeners: Object,       // Event listeners
  abstract: Boolean,       // Abstract menu item (no link)
  key: String,             // Unique key
  badge: String/Number,    // Badge value
  switcher: Boolean,       // Switcher toggle
  back: Boolean,           // Back button
  isDivide: Boolean,       // Divider
  arrow: Boolean,          // Show arrow
  hideText: Boolean,       // Hide text
  children: Array          // Child menu items
}
```

## Vuex Store Integration

The component reads menu data from the `awesIo` Vuex module:

```javascript
// In your Vuex store or via API
this.$store.dispatch('awesIo/setMainMenu', [
  {
    text: 'Dashboard',
    href: '/dashboard',
    icon: 'dashboard'
  },
  {
    text: 'Users',
    icon: 'users',
    toggler: true,
    children: [
      { text: 'All Users', href: '/users' },
      { text: 'Add User', href: '/users/create' }
    ]
  }
])
```

## Menu Transformation Features

### Permission Checking

Menu items with `show` function are filtered based on permissions:

```javascript
{
  text: 'Admin',
  href: '/admin',
  show: ($can) => $can('access', 'admin')
}
```

### Translation

Menu items are automatically translated unless `translate: false`:

```javascript
{
  text: 'Users',         // Will be translated via this.$t('Users')
  translate: true        // Default
}

{
  text: 'Custom Name',
  translate: false       // Won't be translated
}
```

### Dynamic Hrefs

Hrefs can be functions receiving store state and getters:

```javascript
{
  text: 'Profile',
  href: (state, getters) => `/users/${state.user.id}`
}
```

### Auto-Generated Hrefs

Parent items without href automatically use first child's href:

```javascript
{
  text: 'Settings',
  toggler: true,
  children: [
    { text: 'Profile', href: '/settings/profile' },  // Parent will use this href
    { text: 'Security', href: '/settings/security' }
  ]
}
```

## Active Item Detection

The provider automatically detects active menu items based on current route:

- Compares route path with menu item hrefs
- Handles nested menu items
- Updates on route changes
- Sets `activeMenu` (top-level) and `activeMenuItem` (any level)

## Related Components

- `AwLayout` - Uses AwLayoutProvider internally
- `AwLayoutCenter` - Uses AwLayoutProvider internally
- `AwLayoutMenu` - Consumes layout context
- `AwOfflineNotify` - Displayed by provider

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a layout
- All other layouts use this component as their base
- Provides menu context to all child components via provide/inject
- Automatically watches Vuex store for menu changes
- Handles permission-based menu filtering via `$can` (CASL integration)
- Menu items are deeply transformed (including nested children)
- Active item detection uses path prefix matching
- Offline notification is always displayed (shows when offline)
- Menu transformation happens on every store update
- Supports 4 menu types: main, secondary, user, tertiary
- Used internally by AwLayout and AwLayoutCenter