ayanova/devdocs/todo.txt

@@ -38,6 +38,7 @@ UPDATE vue CLI 3.x to 4.x , Vuetify 1.5 to 2.x (many breaking changes) and all t
 https://cli.vuejs.org/migrating-from-v3/
 https://vuetifyjs.com/en/getting-started/releases-and-migrations#migration-guide
 https://blog.anoff.io/2019-10-migrating-vuetify-1-to-2/
+https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide
 
 =============== UPGRADE NOTES =================
 // ,

ayanova/package.json

@@ -21,8 +21,7 @@
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuetify": "^2.1.6",
-    "vuetify-dialog": "^0.3.8",
-    "vuex": "^3.1.1",
+    "vuetify-dialog": "^0.3.8",   
     "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
@@ -33,6 +32,7 @@
     "@vue/cli-plugin-eslint": "^4.0.5",
     "@vue/cli-plugin-pwa": "^4.0.5",
     "@vue/cli-plugin-unit-jest": "^4.0.5",
+    "@vue/cli-plugin-vuex": "^4.0.5",
     "@vue/cli-service": "^4.0.5",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.29",

ayanova/src/App.vue

@@ -2,28 +2,27 @@
   <v-app>
     <v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
       <v-list dense>
-        <v-list-tile
+        <v-list-item
           v-for="item in navItems"
           :key="item.route"
           :to="item.route"
         >
-          <v-list-tile-action>
+          <v-list-item-action>
             <v-icon>{{ "fa-" + item.icon }}</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title>{{ 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>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar
+    <v-app-bar
       v-if="isAuthenticated"
       :color="appBar.isMain ? 'primary' : 'secondary'"
       dark
       fixed
-      app
     >
-      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
         <v-icon>{{ appBar.icon }}</v-icon
         >&nbsp;
@@ -48,7 +47,7 @@
         <v-spacer></v-spacer>
         <v-menu bottom left>
           <template v-slot:activator="{ on }">
-            <v-btn flat icon v-on="on">
+            <v-btn text icon v-on="on">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -62,31 +61,31 @@
                 :key="index"
                 :inset="item.inset"
               ></v-divider>
-              <v-list-tile
+              <v-list-item
                 v-else
                 :key="item.key"
                 :disabled="item.disabled"
                 @click="clickMenuItem(item)"
                 v-bind:class="{ 'hidden-sm-and-up': item.surface }"
               >
-                <v-list-tile-action>
+                <v-list-item-action>
                   <v-icon
                     v-if="item.icon"
                     :color="item.color ? item.color : ''"
                     >{{ "fa-" + item.icon }}</v-icon
                   >
-                </v-list-tile-action>
-                <v-list-tile-content>
-                  <v-list-tile-title>
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title>
                     <span>{{ item.title }}</span>
-                  </v-list-tile-title>
-                </v-list-tile-content>
-              </v-list-tile>
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
             </template>
           </v-list>
         </v-menu>
       </v-toolbar-items>
-    </v-toolbar>
+    </v-app-bar>
     <v-content>
       <v-container fluid fill-height>
         <v-layout justify-center>