Vuetify updated to 2.0+, Stylus loader replaced with Sass

Author: liborpansky

ClientApp/package-lock.json

@@ -13,24 +13,26 @@
     "vue-class-component": "^7.1.0",
     "vue-property-decorator": "^8.2.2",
     "vue-router": "^3.1.3",
-    "vuetify": "^1.5.18",
+    "vuetify": "^2.0.18",
     "vuex": "^3.1.1",
     "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.6.0",
+    "@mdi/font": "^4.4.95",
     "@types/node": "^12.7.5",
     "@vue/cli-plugin-babel": "^3.11.0",
     "@vue/cli-plugin-pwa": "^3.11.0",
     "@vue/cli-plugin-typescript": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
     "axios": "^0.19.0",
     "babel-plugin-transform-imports": "^2.0.0",
-    "stylus": "^0.54.7",
-    "stylus-loader": "^3.0.2",
+    "sass": "^1.22.12",
+    "sass-loader": "^7.1.0",
     "typescript": "^3.6.3",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-cli-plugin-vuetify": "^0.6.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
   }
 }

ClientApp/package.json

@@ -3,28 +3,28 @@
 
     <v-navigation-drawer persistent :mini-variant="miniVariant" :clipped="clipped" v-model="drawer" enable-resize-watcher fixed app>
       <v-list>
-        <v-list-tile value="true" v-for="(item, i) in items" :key="i" :to="item.link">
-          <v-list-tile-action>
+        <v-list-item value="true" v-for="(item, i) in items" :key="i" :to="item.link">
+          <v-list-item-action>
             <v-icon v-html="item.icon"></v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title v-text="item.title"></v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.title"></v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <v-toolbar app :clipped-left="clipped">
-      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
-      <v-btn icon @click.stop="miniVariant = !miniVariant">
+    <v-app-bar app :clipped-left="clipped" color="info" dark>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-btn class="d-none d-lg-flex" icon @click.stop="miniVariant = !miniVariant">
         <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
       </v-btn>
-      <v-btn icon @click.stop="clipped = !clipped">
+      <v-btn class="d-none d-lg-flex" icon @click.stop="clipped = !clipped">
         <v-icon>web</v-icon>
       </v-btn>
       <v-toolbar-title v-text="title"></v-toolbar-title>
       <v-spacer></v-spacer>
-    </v-toolbar>
+    </v-app-bar>
 
     <v-content>
       <router-view/>

ClientApp/src/App.vue

@@ -3,14 +3,14 @@
     <p>Current count (Vuex):
       <strong>{{ currentCount }}</strong>
     </p>
-    <v-btn color="info" @click.prevent="increment">Increment</v-btn>
-    <v-btn color="info" @click.prevent="reset">Reset</v-btn>
+    <v-btn class="ma-2" color="info" @click.prevent="increment">Increment</v-btn>
+    <v-btn class="ma-2" color="info" @click.prevent="reset">Reset</v-btn>
   </div>
 </template>
 
 <script lang="ts">
-import { State, Action, Getter } from 'vuex-class';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Action, Getter } from 'vuex-class';
+import { Component, Vue } from 'vue-property-decorator';
 const namespace: string = 'counter';
 
 @Component

ClientApp/src/components/Counter.vue

@@ -1,7 +1,7 @@
 import '@babel/polyfill';
 import Vue from 'vue';
 import './plugins/axios';
-import './plugins/vuetify';
+import vuetify from './plugins/vuetify';
 import App from './App.vue';
 import router from './router';
 import store from '@/store/index';
@@ -10,6 +10,7 @@ import './registerServiceWorker';
 Vue.config.productionTip = false;
 
 new Vue({
+  vuetify,
   router,
   store,
   render: (h) => h(App),