admin-layout-vue

Admin Layout - Vue JS component

Requirements:

• Bootstrap 5.2
• Vue router (for <router-link>)
• Vue 3

Install:

npm install admin-layout-vue

Parameters:

Example

<template>
  <admin-layout
      brand-name="Brand"
      :left-items-by-groups="leftItemsByGroups"
      :top-items="topItems"
  >
    <template #topEnd>
      <div class="badge bg-info me-3">
        Example
      </div>
    </template>
    <router-view />
  </admin-layout>
</template>

<script>
import AdminLayout from 'admin-layout-vue'

export default {
  name: 'ExampleComponent',
  components: {
    AdminLayout,
  },
  data() {
    return {
      /**
       * Sidebar menu items
       */
      leftItemsByGroups: [
        {
          items: [
            {
              label: 'Home',
              iconClass: 'bi bi-house-door-fill',
              route: {
                name: 'home',
              },
            },
          ],
        },
        {
          heading: 'First heading',
          items: [
            {
              label: 'People',
              iconClass: 'bi bi-people-fill',
              route: {
                name: 'people',
              },
              relatedRoutes: [
                  'peopleCreate',
              ],
            },
            {
              label: 'Briefcase',
              iconClass: 'bi bi-briefcase-fill',
              subItems: [
                {
                  label: 'Option 1',
                  route: {
                    name: 'option',
                    query: {
                      status: '1',
                    },
                  },
                  relatedRoutes: [
                    'relatedOption',
                  ],
                },
                {
                  label: 'Option 2',
                  route: {
                    name: 'option',
                    query: {
                      status: '2',
                    },
                  },
                },
              ],
            },
          ],
        },
        {
          items: [
            {
              label: 'Coin',
              iconClass: 'bi bi-coin',
              route: {
                name: 'coin',
              },
            },
          ],
        },
      ],
      /**
       * Top navbar items
       */
      topItems: [
        {
          iconClass: 'bi bi-person-circle',
          subItems: [
            {
              label: this.$t('logout.submit'),
              callable: this.onLogoutClick,
            },
          ],
          showBadge: false,
        },
        {
          iconClass: 'bi bi-bell-fill',
          callable: this.showNotifications,
          showBadge: this.notificationsTotalCount > 0,
        },
      ],
    }
  }
}
</script>

Screenshots