Updated to vuetify 1.0

assets/App.vue

@@ -1,25 +1,35 @@
 <template lang="pug">
   v-app(dark)
     v-navigation-drawer.pb-0.main-drawer(app, fixed, temporary, v-model='$store.state.drawer')
-      v-list
+      v-list(dark)
         v-list-tile#title(to='/')
           v-list-tile-action
             img(src='~static/images/icon2.png', height='50')
           v-list-tile-title.title.white--text かわニメ
+
         template(v-for='item in itemGroup')
-          v-list-group(v-if='item.items', :key='item.title', :group="item.group")
-            v-list-tile.ripple(slot='item', ripple)
-              v-list-tile-action
-                v-icon {{ item.action }}
+          v-list-group(
+            v-if='item.items',
+            :group='item.group',
+            :prepend-icon='item.action',
+            no-action
+          )
+            v-list-tile(slot='activator', ripple)
+              v-list-tile-content
                 v-list-tile-title {{ item.title }}
-              v-list-tile-action
-                v-icon keyboard_arrow_down
-            v-list-tile.ripple(v-for='subItem in item.items', ripple, :to='subItem.href', :key='subItem.title', exact)
+            template(v-for='(subItem, i) in item.items')
+              v-list-tile(
+                :key='i',
+                :to='subItem.href',
+                :disabled='subItem.disabled',
+                ripple
+              )
                 v-list-tile-action
                   v-icon {{ subItem.action }}
                 v-list-tile-content
-                v-list-tile-title {{ subItem.title }}
-            v-divider
+                  v-list-tile-title
+                    span {{ subItem.title }}
+
           v-subheader.white--text(v-else-if='item.header') {{ item.header }}
           v-divider(v-else-if='item.divider')
 
@@ -46,9 +56,7 @@
       settings
       logs
 
-    //- main.m
     v-content
-      //- v-content // Apparently required. Todo
       transition(name='page', mode='out-in')
         router-view
 
@@ -72,7 +80,6 @@
 </template>
 
 <script>
-  import axios from 'axios'
   import Meta from 'mixins/meta'
 
   export default {
@@ -91,7 +98,7 @@
 
       setInterval(async () => {
         try {
-          const {status} = await this.$axios.get('_isOnline')
+          const {status} = await this.$this.$axios.get('_isOnline')
 
           this.$store.commit('setConnected', status === 200)
         } catch (e) { void e }
@@ -189,7 +196,7 @@
         this.$store.commit('toggleDrawer')
       },
       actOnWindow (action) {
-        axios.get('/_win', {
+        this.$axios.get('/_win', {
           params: {
             action
           }

assets/stylus/global.styl

@@ -42,6 +42,9 @@ table.table thead td:not(:nth-child(1)), table.table tbody td:not(:nth-child(1))
 .fill-height
   min-height calc(100vh - (48px + 24px)) !important
 
+.navigation-drawer .list
+  background initial
+
 .navigation-drawer .list__tile
   font-size 14px
 

components/kFooter.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-footer.grey.darken-4.pr-2(app)
+  v-footer.grey.darken-4.pr-2
     v-spacer
     .white--text © 2016 - {{ lastYear }} Kylart
 </template>

package.json

@@ -58,7 +58,7 @@
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.13",
-    "vuetify": "^0.17.7",
+    "vuetify": "^1.0.15",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0",
     "webtorrent": "^0.98.24"

pages/malPage.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
-  v-container(fluid, fill-height, grid-list-xs)
-    v-card
+  v-card.fill-height
     v-layout.pa-2(row, wrap, justify-center)
       v-flex.centered(xs12, sm2)
         .headline.pl-4 MyAnimeList
@@ -151,9 +150,6 @@
 </script>
 
 <style lang="stylus" scoped>
-  .container
-    display inline-block
-
   .centered
     display flex
     align-items center

pages/seasons.vue

@@ -15,13 +15,10 @@
           v-text-field(name='input-year', type='number', min='1917', label='Year', v-model='$store.state.seasons.year', dark)
         v-flex.refresh-button(offset-sm1, sm2, xs8)
           v-btn(color='secondary', block, dark, @click='refreshSeason()') Refresh
-      v-tabs#tabs(dark, fixed, centered)
-        v-tabs-bar.mablue
-          v-tabs-slider.primary
-          v-tabs-item(v-for='i in 5', :href="'#' + i", :key='i')
+      v-tabs#tabs(grow, slider-color='primary')
+        v-tab.mablue(v-for='i in 5', :href="'#' + i", :key='i')
           | {{ season[i].name }}
-        v-tabs-items
-          v-tabs-content(v-for='i in 5', lazy, :id='`${i}`', :key='i')
+        v-tab-item(v-for='i in 5', lazy, :id='`${i}`', :key='i')
           v-text-field.query(v-model='query', label='Search entry', dark)
           v-layout.elems(row, wrap)
             transition-group(name='list')

pages/watchList.vue

@@ -1,14 +1,10 @@
 <template lang="pug">
   v-container#watch-list.pa-0.mt-0(fluid, fill-height)
-    v-tabs#tabs(grow, icons)
-      v-tabs-bar.mablue
-        v-tabs-slider.primary
+    v-tabs#tabs(grow, icons-and-text, slider-color='primary')
       template(v-for='i in 5')
-          v-tabs-item(:href="'#tabs-' + i")
-            | {{ actionsList[i - 1].name }}
+        v-tab.mablue(:href="'#tabs-' + i") {{ actionsList[i - 1].name }}
           v-icon {{ actionsList[i - 1].icon }}
-      v-tabs-items
-        v-tabs-content(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
+      v-tab-item(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
         v-layout.list-container.pb-2(row, wrap)
           v-flex(xs12)
             v-layout.top-form(row, wrap, align-center, justify-center)