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:

Property	Type	Required
brandName	String	No
leftItemsByGroups	Array	Yes
leftItemsByGroups[].heading	String	No
leftItemsByGroups[].items	Array	Yes
leftItemsByGroups[].items[].label	String	Yes
leftItemsByGroups[].items[].iconClass	String	No
leftItemsByGroups[].items[].route	Object	No
leftItemsByGroups[].items[].route.name	String	Yes
leftItemsByGroups[].items[].visible	Bool	No
leftItemsByGroups[].items[].subItems	Array	No
leftItemsByGroups[].items[].relatedRoutes	Array	No
leftItemsByGroups[].items[].subItems[].label	String	Yes
leftItemsByGroups[].items[].subItems[].route	Object	Yes
leftItemsByGroups[].items[].subItems[].route.name	Object	Yes
leftItemsByGroups[].items[].subItems[].visible	Bool	No
leftItemsByGroups[].items[].subItems[].relatedRoutes	Array	No
topItems	Array	Yes
topItems[].label	String	No
topItems[].iconClass	String	No
topItems[].callable	Callable	No
topItems[].showBadge	Bool	No
topItems[].subItems[]	Array	No
topItems[].subItems[].label	String	Yes
topItems[].subItems[].class	String	No
topItems[].subItems[].iconClass	String	No
topItems[].subItems[].callable	Callable	Yes
topNavClass	String	No
leftNavClass	[String, Object]	No
leftNavBgClass	[String, Object]	No
dataBsThemeTop	String	No
dataBsThemeLeft	String	No
strictActiveRoute	Boolean	No

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