Vuetify Dashboard Template

Create a Vue Dashboard starter using Vuetify

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