# Layout

By using Vue CLI plugin, your project will be initialized with a pre made default admin layout. The vue template of this layout is located into src/layout/Admin.vue and linked into parent authenticated route inside src/routes/admin.js as following :

src/routes/admin.js

import AdminLayout from "@/layouts/Admin";
//...

export default {
  path: "/",
  name: "home",
  redirect: "/dashboard",
  component: AdminLayout,
  meta: {
    title: i18n.t("routes.home"),
  },
  children: [
    //...
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Regions

The main layout, alias VaLayout, is composed of different regions as shown here :

layout

Region	Default VAComponent	Description
AppBar	`VaAppBar`	Main app bar, mainly a `VAppBar`.
Sidebar	`VaSidebar`	Main sidebar, mainly a `VNavigationDrawer`.
Header	`VaBreadcrumbs`	Page header, perfect for a `VBreadcrumbs` or any custom alerts.
RouterView	-	All CRUD pages or any custom authenticated page will show here.
Aside	`VaAside`	Aside content, for any contextualized additional infos.
Footer	`VaFooter`	App footer, for some corporate information.

# Components

# Admin layout

VaLayout

Admin composable component layout with one slot for each region.

SLOTS

Name	Description
app-bar	Top app bar region, ideal place for VAppBar.
sidebar	Sidebar region, ideal place for VNavigationDrawer.
header	Content top header region, ideal place for VBreadcrumbs and/or additional custom messages or important notification as impersonation state, etc.
footer	Footer region, put here some corporate information and links.
aside	Right aside region, where you can put anything you need.

This slot composition system allows a complete customization possibility. By default Vue CLI Plugin will generate functional basic layout with all default components placed for each slot. You can totally customize or replace each component by your own.

src/layout/Admin.vue

<template>
  <va-layout>
    <va-app-bar
      slot="app-bar"
      :header-menu="headerMenu"
      :profile-menu="profileMenu"
      @toggle="
        $vuetify.breakpoint.lgAndUp ? (mini = !mini) : (drawer = !drawer)
      "
    ></va-app-bar>
    <va-sidebar
      slot="sidebar"
      :menu="sidebarMenu"
      v-model="drawer"
      :mini-variant="mini"
    ></va-sidebar>
    <va-breadcrumbs slot="header"></va-breadcrumbs>
    <va-aside slot="aside"></va-aside>
    <va-footer slot="footer" :menu="footerMenu"></va-footer>
  </va-layout>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

OPTIONAL

You can totally replace the layout component by your own if you need total personalization !

In this case you may use at least the below VaMessages component in order to have all toaster notifications and confirmation dialogs.

MENU LINKS

See below section.

# App bar

VaAppBar

Default customizable admin VAppBar. Contains main app title, header menus, direct resource creation links, global refresh action, profile menu. Profile user dropdown will not appear on guest mode.

PROPS

Props	Type	Description
title	`string`	Replace default admin app title set on VuetifyAdmin constructor.
headerMenu	`array`	Header links visible on left side.
profileMenu	`array`	Profile related links, visible inside authenticated dropdown menu.
disableCreate	`boolean`	Disable create menu.
disableReload	`boolean`	Disable reload state button.
color	`string`	Color for the VAppBar.
dense	`boolean`	Reduce height of VAppBar
dark	`boolean`	Apply dark theme variant for VAppBar

EVENTS

Name	Description
toggle	Triggered on VAppBar icon click, use it for VaSidebar toggling or minimizing.

CREATE RESOURCE LINKS

The create action links will be automatically generated from your registered resources if the current user has permissions for it.

RELOAD BUTTON

The reload button will dynamically spin for every fetch calls from you data provider, i.e. getList, getOne or getMany. A manual click will redo the call from current state for freshed content. It will be apply on all CRUD pages.

The show, create, edit page will reload the route linked resource and refresh all related field or input components, while list page will reload current resources list from current iterator context.

VaSidebar

Default customizable admin VNavigationDrawer with full hierarchical menu and minimize variant.

PROPS

Props	Type	Description
menu	`array`	Main place for side menu, support hierarchical structure, MDI icons, heading and dividers.
miniVariant	`boolean`	Minimize the sidebar and show only icons.
color	`string`	Main color of VNavigationDrawer.
dark	`boolean`	Apply dark theme variant for VNavigationDrawer
value	`null`	Control visibility

SLOTS

Name	Description
img	Image background.

EVENTS

Name	Description
input	Toggle sidebar.

HIDE OR MINIMIZE

Use drawer event from VaAppBar in order to toggle sidebar.

VaFooter

Default customizable admin VFooter with possibility of corporate related links and infos.

PROPS

Props	Type	Description
menu	`array`	Menu links.

SLOTS

Name	Description
default	Right side information.

# Breadcrumbs

VaBreadcrumbs

Default admin component for breadcrumbs, will generate automatically hierarchical links from current route. Support hierarchical CRUD structure.

# Aside

VaAside

Customizable admin aside component where you put some contextualized additional information. Use the associated VaAsideLayout component for content integration from anywhere on any context.

PROPS

Props	Type	Description
width	`number`	Width of the aside

# Messages

VaMessages

Internal VaMessages system for snackbar/toaster infos and confirm dialog. Integrated with all resource modules for message API calls. Will automatically show message error property in case or API errors. Already included in main admin layout, use it only if you need total custom layout.

# Links

All navigation menu that can be putted on next components are simple array of object which represents a link. VA Components that support nav are VaAppBar, VaSidebar and VaFooter for a total of 4 different menus, header, profile, sidebar and footer. Example of simple menu array :

[
  {
    icon: "mdi-account",
    text: this.$t("menu.profile"),
    link: "/profile",
  },
  {
    icon: "mdi-settings",
    text: this.$t("menu.settings"),
    link: "/settings",
  },
]

1
2
3
4
5
6
7
8
9
10
11
12

Object link structure :

Property	Type	Description
icon	`string`	Icon of menu, shown on left side. Must be a valid MDI an is only supported on `sidebar` and `profile` menu.
text	`string`	Label of link.
link	`string \| object`	Valid Vue Router menu. Can't be used with children.
href	`string`	Use for free external link. Will open as target blank. Can't be used with children.
children	`array`	Child links for hierarchical menu, for sidebar only. Can't be used with link or href.
expanded	`boolean`	Show children expanded by default. Only affect links with children.
heading	`string`	Transform link into section label heading, for sidebar menu only. Will disable all other properties.
divider	`boolean`	Transform link into divider, for sidebar menu only. Will disable all other properties.

SIDEBAR NAV

Because sidebar hierarchical menu can be cumbersome, Vue CLI Plugin will set it on a separated src/_nav.js file. In addition to standard link, sidebar nav support 2 specifics items :

Heading title, a simple object with a heading property. Ideal for many links section.
Divider, just put { divider: true } for making a simple section divider.

LINKS TO RESOURCES

You can easily build resources actions links thanks to resources link helpers.

PERMISSIONS ON LINKS

You can easily show hide each link by using some authorization helpers.

← Generators List →

# Layout

# Regions

# Components

# Admin layout

# App bar

# Sidebar

# Footer

# Aside

# Messages

# Links