Vuetify Dashboard Template

Create a Vue Dashboard starter using Vuetify

Carol Skelly


Lately I’ve been playing with Vue & Vuetify a lot so I decided to share this dashboard starter template. This may be helpful to kick start your next “admin” project, or as a basis for a creating simple collapsing sidebar layout with Vuetify.


- Vue 2.x, Vuetify 2.2.x, Vue Router, Material Design Icons
- Light/Dark Theme Switcher
- Collapsing/Toggleable Sidebar
- Material Design Icons

Vue App and Router
I started with a typical Vue app and router set-up.

const routes = [
{ path:'/', component: Home },
{ path:'/detections', component: Page },
{ path:'/comp', component: Page },
{ path:'/customers', component: Page },
{ path:'/orders', component: Page },
{ path:'/settings', component: Page },
new Vue({
el: '#app',
router: new VueRouter({routes}),
vuetify: new Vuetify(),

App Layout

The overlay layout was 🍰 easy to achieve using Vuetify’s `v-app-bar`, `v-navigation-drawer` and `v-content` components.

Next I fine tuned the Sidebar (`v-navigation-drawer`) using a `v-list` with items bound to my list of menu `items` data. The toggling of the Sidebar is controlled with the `sidebarMenu` menu boolean. You’ll also see the `toggleMenu` boolean for controlling the mini-variant prop Vuetify’s navigation-drawer.

<div id="app">
<v-app-bar app color="primary" dark>
<v-list dense color="primary" dark>
<v-container fluid>
<v-row class="fill-height">
<transition name="fade">

Since I wanted the Sidebar (`v-navigation-drawer`) to auto collapse to icons (the mini-variant) on smaller screens I added a `mini` computed prop to control this. This value comes from Vuetify’s breakpoint `this.$vuetify.breakpoint.smAndDown`, otherwise the `toggleMini` state that’s already stored in our `data` object.

Lastly I added the theme switcher logic. As you may know Vuetify has a `light` or `dark` theme option. I added a button to the `app-bar`. And the a method for the theme switch, and `buttonText` computed value for the button.

  <v-app-bar app color="primary" dark elevation="0">
<v-app-bar-nav-icon @click.stop="sidebarMenu = !sidebarMenu"></v-app-bar-nav-icon>
<v-btn @click="toggleTheme" color="primary" class="mr-2">{{buttonText}}</v-btn>

Checkout the finished product on Codeply😎

Demo: Vuetify Dashboard Example
Full source:



Carol Skelly

S/W Engineer. Web developer. @Bootply @Codeply