Vuetify Dashboard Template

Create a Vue Dashboard starter using Vuetify

Carol Skelly
WDstack

--

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.

Features

- 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>
<v-app-bar app color="primary" dark>
..
</v-app-bar>
<v-navigation-drawer
app
floating
>
<v-list dense color="primary" dark>
...
</v-list>
</v-navigation-drawer>
<v-content>
<v-container fluid>
<v-row class="fill-height">
<v-col>
<transition name="fade">
<router-view></router-view>
</transition>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer>
...
</v-footer>
</v-app>
</div>

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-spacer></v-spacer>
<v-btn @click="toggleTheme" color="primary" class="mr-2">{{buttonText}}</v-btn>
<v-icon>mdi-account</v-icon>
</v-app-bar>

Checkout the finished product on Codeply😎

Demo: Vuetify Dashboard Example
Full source: https://codeply.com/p/AtcbXz9Ybg

--

--

Carol Skelly
WDstack

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