Added the dashboard layout

assets/variables.scss

@@ -1,4 +1,3 @@
-// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
-//
-// The variables you want to modify
-// $font-size-root: 20px;
+$card-border-radius: 10px!important;
+$menu-content-border-radius: 50%!important;
+$btn-text-transform: 'capitalize';

layouts/default.vue

@@ -23,33 +23,31 @@
               </v-avatar>
             </v-btn>
           </template>
-          <v-card>
-            <v-list-item-content class="justify-center">
-              <div class="mx-auto text-center">
-                <v-avatar color="brown">
-                  <span class="white--text headline">JD</span>
-                </v-avatar>
-                <h3>{{ $auth.user.name }}</h3>
-                <p class="caption mt-1">
-                  {{ $auth.user.email }}
-                </p>
-                <v-divider class="my-3" />
-                <v-btn to="/" depressed rounded text> Home </v-btn>
-                <v-divider class="my-3" />
-                <v-btn to="/home" depressed rounded text> My account </v-btn>
-                <v-divider class="my-3" />
-                <v-btn
-                  color="error"
-                  depressed
-                  rounded
-                  text
-                  @click="$auth.logout()"
-                >
-                  Logout
-                </v-btn>
-              </div>
-            </v-list-item-content>
-          </v-card>
+          <v-list-item-content class="justify-center">
+            <div class="mx-auto text-center">
+              <v-avatar color="brown">
+                <span class="white--text headline">JD</span>
+              </v-avatar>
+              <h3>{{ $auth.user.name }}</h3>
+              <p class="caption mt-1">
+                {{ $auth.user.email }}
+              </p>
+              <v-divider class="my-3" />
+              <v-btn to="/" depressed rounded text> Home </v-btn>
+              <v-divider class="my-3" />
+              <v-btn to="/home" depressed rounded text> My account </v-btn>
+              <v-divider class="my-3" />
+              <v-btn
+                color="error"
+                depressed
+                rounded
+                text
+                @click="$auth.logout()"
+              >
+                Logout
+              </v-btn>
+            </div>
+          </v-list-item-content>
         </v-menu>
         <template v-else>
           <v-btn text link to="/login"> Login </v-btn>

nuxt.config.js

@@ -9,7 +9,7 @@ export default {
 
   // Vue router
   router: {
-    middleware: ['auth'],
+    middleware: 'auth',
   },
 
   /**
@@ -75,6 +75,7 @@ export default {
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
+    treeShake: true,
     theme: {
       dark: false,
       themes: {
@@ -96,7 +97,7 @@ export default {
    */
   auth: {
     strategies: {
-      local: {
+      cookie: {
         user: {
           property: 'user',
         },

pages/home.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-container>
+    <v-col cols="12">
+      <h1>Hi {{ $auth.user.name }}</h1>
+    </v-col>
+    <v-col cols="12" md="8">
+      <v-tabs grow center-active>
+        <v-tab to="/home">Home</v-tab>
+        <v-tab to="/home/deployments">Deployments</v-tab>
+        <v-tab to="/home/applications">Applications</v-tab>
+        <v-tab to="/home/settings">Settings</v-tab>
+      </v-tabs>
+      <nuxt-child />
+    </v-col>
+  </v-container>
+</template>

pages/home/applications.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>Applications page</h1>
+</template>
+<script>
+export default {
+  head() {
+    return {
+      title: 'Applications 🧑🏽‍💻',
+    }
+  },
+}
+</script>

pages/home/deployments.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>Deployments page</h1>
+</template>
+<script>
+export default {
+  head() {
+    return {
+      title: 'Deployments 🚀',
+    }
+  },
+}
+</script>

pages/home/index.vue

@@ -1,3 +1,56 @@
 <template>
-  <h1>You are logged as {{ $auth.user.name }}</h1>
+  <v-row>
+    <v-col cols="12" md="4">
+      <v-card outlined class="my-5">
+        <v-sheet
+          elevation="2"
+          class="stats-sheet display-3"
+          color="primary"
+          height="70"
+        >
+          23
+        </v-sheet>
+        <v-card-text class="text-center title">Applications</v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="12" md="4">
+      <v-card outlined class="my-5">
+        <v-sheet
+          elevation="2"
+          class="stats-sheet display-3"
+          color="success"
+          height="70"
+        >
+          55
+        </v-sheet>
+        <v-card-text class="text-center title">Deployments</v-card-text>
+      </v-card>
+    </v-col>
+
+    <v-col cols="12" md="4">
+      <v-card outlined class="my-5">
+        <v-sheet
+          elevation="2"
+          class="stats-sheet display-3"
+          color="error"
+          height="70"
+        >
+          78
+        </v-sheet>
+        <v-card-text class="text-center title">Failed deployments</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
+<style scoped>
+.stats-sheet {
+  margin-top: -15px;
+  margin-left: 7px;
+  margin-right: 7pt;
+  border-radius: 5px !important;
+  text-align: center;
+  color: white;
+  padding: 4px;
+}
+</style>

pages/home/settings.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>Settings</h1>
+</template>
+<script>
+export default {
+  head() {
+    return {
+      title: 'Settings ⚙️',
+    }
+  },
+}
+</script>

pages/login/index.vue

@@ -60,7 +60,7 @@ export default {
   methods: {
     async login() {
       try {
-        await this.$auth.loginWith('local', { data: this.credentials })
+        await this.$auth.loginWith('cookie', { data: this.credentials })
       } catch (error) {
         if (error.response.status === 500) {
           throw new Error(error)