feat: upgrade vuetify to 2.x (#297)

nuxt · Jul 26, 2019 · f735b63 · f735b63 · Natsuwo · Jul 27, 2019
1 parent 54c29ff
commit f735b63
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 67 deletions.
diff --git a/template/_package.json b/template/_package.json
@@ -73,8 +73,6 @@
     <%_ if (ui === 'bootstrap') { _%>
     "bootstrap-vue": "^2.0.0-rc.11",
     "bootstrap": "^4.1.3",
-    <%_ } else if (ui === 'vuetify') { _%>
-    "@nuxtjs/vuetify": "0.5.5",
     <%_ } else if (ui === 'bulma') { _%>
     "@nuxtjs/bulma": "^1.2.1",
     <%_ } else if (ui === 'element-ui') { _%>
@@ -105,8 +103,7 @@
     <%_ if (ui === 'tailwind') { _%>
     "@nuxtjs/tailwindcss": "^1.0.0",
     <%_ } else if (ui === 'vuetify') { _%>
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
+    "@nuxtjs/vuetify": "^1.0.0",
     <%_ } _%>
     <%_ if (eslint) { _%>
     "@nuxtjs/eslint-config": "^1.0.1",

diff --git a/template/frameworks/vuetify/assets/style/app.styl b/template/frameworks/vuetify/assets/style/app.styl
diff --git a/template/frameworks/vuetify/assets/style/variables.styl b/template/frameworks/vuetify/assets/style/variables.styl
diff --git a/template/frameworks/vuetify/assets/variables.scss b/template/frameworks/vuetify/assets/variables.scss
@@ -0,0 +1 @@
+$font-size-root: 20px;
diff --git a/template/frameworks/vuetify/layouts/default.vue b/template/frameworks/vuetify/layouts/default.vue
@@ -8,55 +8,55 @@
       app
     >
       <v-list>
-        <v-list-tile
+        <v-list-item
           v-for="(item, i) in items"
           :key="i"
           :to="item.to"
           router
           exact
         >
-          <v-list-tile-action>
+          <v-list-item-action>
             <v-icon>{{ item.icon }}</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title v-text="item.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-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar
+    <v-app-bar
       :clipped-left="clipped"
       fixed
       app
     >
-      <v-toolbar-side-icon @click="drawer = !drawer" />
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <v-btn
         icon
         @click.stop="miniVariant = !miniVariant"
       >
-        <v-icon>{{ `chevron_${miniVariant ? 'right' : 'left'}` }}</v-icon>
+        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
       </v-btn>
       <v-btn
         icon
         @click.stop="clipped = !clipped"
       >
-        <v-icon>web</v-icon>
+        <v-icon>mdi-application</v-icon>
       </v-btn>
       <v-btn
         icon
         @click.stop="fixed = !fixed"
       >
-        <v-icon>remove</v-icon>
+        <v-icon>mdi-minus</v-icon>
       </v-btn>
       <v-toolbar-title v-text="title" />
       <v-spacer />
       <v-btn
         icon
         @click.stop="rightDrawer = !rightDrawer"
       >
-        <v-icon>menu</v-icon>
+        <v-icon>mdi-menu</v-icon>
       </v-btn>
-    </v-toolbar>
+    </v-app-bar>
     <v-content>
       <v-container>
         <nuxt />
@@ -69,14 +69,14 @@
       fixed
     >
       <v-list>
-        <v-list-tile @click.native="right = !right">
-          <v-list-tile-action>
+        <v-list-item @click.native="right = !right">
+          <v-list-item-action>
             <v-icon light>
-              compare_arrows
+              mdi-repeat
             </v-icon>
-          </v-list-tile-action>
-          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
-        </v-list-tile>
+          </v-list-item-action>
+          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
     <v-footer
@@ -97,12 +97,12 @@ export default {
       fixed: false,
       items: [
         {
-          icon: 'apps',
+          icon: 'mdi-apps',
           title: 'Welcome',
           to: '/'
         },
         {
-          icon: 'bubble_chart',
+          icon: 'mdi-chart-bubble',
           title: 'Inspire',
           to: '/inspire'
         }

diff --git a/template/frameworks/vuetify/pages/index.vue b/template/frameworks/vuetify/pages/index.vue
@@ -9,7 +9,7 @@
       sm8
       md6
     >
-      <div class="text-xs-center">
+      <div class="text-center">
         <logo />
         <vuetify-logo />
       </div>
@@ -68,7 +68,6 @@
           <v-spacer />
           <v-btn
             color="primary"
-            flat
             nuxt
             to="/inspire"
           >

diff --git a/template/frameworks/vuetify/pages/inspire.vue b/template/frameworks/vuetify/pages/inspire.vue
@@ -1,6 +1,6 @@
 <template>
   <v-layout>
-    <v-flex text-xs-center>
+    <v-flex class="text-center">
       <img
         src="/v.png"
         alt="Vuetify.js"

diff --git a/template/nuxt/nuxt.config.js b/template/nuxt/nuxt.config.js
@@ -36,13 +36,6 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-      <%_ if (ui === 'vuetify') { _%>,
-      {
-        rel: 'stylesheet',
-        href:
-          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
-      }
-      <%_ } _%>
     ]
   },
   /*
@@ -86,6 +79,8 @@ module.exports = {
     <%_ if (ui === 'tailwind') { _%>
     // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
     '@nuxtjs/tailwindcss',
+    <%_ } else if (ui === 'vuetify') { _%>
+    '@nuxtjs/vuetify',
     <%_ } _%>
   ],
   /*
@@ -101,8 +96,6 @@ module.exports = {
     <%_ } else if (ui === 'buefy') { _%>
     // Doc: https://buefy.github.io/#/documentation
     'nuxt-buefy',
-    <%_ } else if (ui === 'vuetify') { _%>
-    '@nuxtjs/vuetify',
     <%_ } _%>
     <%_ if (axios) { _%>
     // Doc: https://axios.nuxtjs.org/usage
@@ -126,14 +119,20 @@ module.exports = {
   ** https://github.com/nuxt-community/vuetify-module
   */
   vuetify: {
+    customVariables: ['~/assets/variables.scss'],
     theme: {
-      primary: colors.blue.darken2,
-      accent: colors.grey.darken3,
-      secondary: colors.amber.darken3,
-      info: colors.teal.lighten1,
-      warning: colors.amber.base,
-      error: colors.deepOrange.accent4,
-      success: colors.green.accent3
+      dark: true,
+      themes: {
+        dark: {
+          primary: colors.blue.darken2,
+          accent: colors.grey.darken3,
+          secondary: colors.amber.darken3,
+          info: colors.teal.lighten1,
+          warning: colors.amber.base,
+          error: colors.deepOrange.accent4,
+          success: colors.green.accent3
+        }
+      }
     }
   },
   <%_ } _%>

diff --git a/test/snapshots/index.test.js.md b/test/snapshots/index.test.js.md
@@ -2992,8 +2992,7 @@ Generated by [AVA](https://ava.li).
       '.gitignore',
       'README.md',
       'assets/README.md',
-      'assets/style/app.styl',
-      'assets/style/variables.styl',
+      'assets/variables.scss',
       'components/Logo.vue',
       'components/README.md',
       'components/VuetifyLogo.vue',
@@ -3017,13 +3016,11 @@ Generated by [AVA](https://ava.li).
 
     {
       dependencies: {
-        '@nuxtjs/vuetify': '0.5.5',
         nuxt: '^2.0.0',
       },
       devDependencies: {
+        '@nuxtjs/vuetify': '^1.0.0',
         nodemon: '^1.18.9',
-        stylus: '^0.54.5',
-        'stylus-loader': '^3.0.2',
       },
       private: true,
       scripts: {
@@ -3053,12 +3050,6 @@ Generated by [AVA](https://ava.li).
         ],␊
         link: [␊
           { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
-    ,␊
-          {␊
-            rel: 'stylesheet',␊
-            href:␊
-              'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'␊
-          }␊
         ]␊
       },␊
       /*␊
@@ -3079,26 +3070,32 @@ Generated by [AVA](https://ava.li).
       ** Nuxt.js dev-modules␊
       */␊
       devModules: [␊
+        '@nuxtjs/vuetify',␊
       ],␊
       /*␊
       ** Nuxt.js modules␊
       */␊
       modules: [␊
-        '@nuxtjs/vuetify',␊
       ],␊
       /*␊
       ** vuetify module configuration␊
       ** https://github.com/nuxt-community/vuetify-module␊
       */␊
       vuetify: {␊
+        customVariables: ['~/assets/variables.scss'],␊
         theme: {␊
-          primary: colors.blue.darken2,␊
-          accent: colors.grey.darken3,␊
-          secondary: colors.amber.darken3,␊
-          info: colors.teal.lighten1,␊
-          warning: colors.amber.base,␊
-          error: colors.deepOrange.accent4,␊
-          success: colors.green.accent3␊
+          dark: true,␊
+          themes: {␊
+            dark: {␊
+              primary: colors.blue.darken2,␊
+              accent: colors.grey.darken3,␊
+              secondary: colors.amber.darken3,␊
+              info: colors.teal.lighten1,␊
+              warning: colors.amber.base,␊
+              error: colors.deepOrange.accent4,␊
+              success: colors.green.accent3␊
+            }␊
+          }␊
         }␊
       },␊
       /*␊

diff --git a/test/snapshots/index.test.js.snap b/test/snapshots/index.test.js.snap