feat: upgrade to new vuetify 2 spec

use `v-list-item` instead of `v-list-tile`
remove `.eslintrc.js` in favor of `.eslintrc`
fix typo
use fibers for faster sass compilation
assets option
update example and refactor it as fixture
upgrade dependencies
update README.md

BREAKING CHANGE: Removed `css`, implemented `assets` option

Author: kevinmarrec

.eslintrc

@@ -1,9 +1,4 @@
 module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
   extends: [
     '@nuxtjs'
   ]

.eslintrc.js

@@ -48,7 +48,7 @@ Make sure you add the `vuetify-loader`, `stylus-loader` and `stylus` dependencie
 
 - Clone this repository
 - Install dependencies using `yarn install` or `npm install`
-- Start development server using `npm run dev`
+- Start development server using `yarn dev` or `npm run dev`
 
 ## License
 

README.md

@@ -1,33 +1,66 @@
 const path = require('path')
+const merge = require('deepmerge')
 
 const defaults = {
-  css: true,
-  materialIcons: true,
-  treeShake: false
+  assets: {
+    font: true,
+    icons: true
+  },
+  treeShake: process.env.NODE_ENV === 'production'
+}
+
+// See https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0-alpha.12
+const sassLoaderOptions = {
+  implementation: require('sass'),
+  fiber: require('fibers')
 }
 
 module.exports = function (moduleOptions) {
   this.nuxt.hook('build:before', () => {
-    const options = {
-      ...defaults,
-      ...this.options.vuetify,
-      ...moduleOptions
+    const options = merge.all([
+      defaults,
+      this.options.vuetify,
+      moduleOptions
+    ])
+
+    // User can disable all assets with ``
+    if (options.assets === false) {
+      options.assets = {
+        font: false,
+        icons: false
+      }
     }
 
+    // Customize sass-loader options
+    Object.assign(this.options.build.loaders.sass, sassLoaderOptions)
+    Object.assign(this.options.build.loaders.scss, sassLoaderOptions)
+
     // Add css
-    if (options.css) {
-      this.options.css.unshift('vuetify/dist/vuetify.css')
+    if (options.treeShake) {
+      this.options.css.push('vuetify/src/styles/main.sass')
+    } else {
+      this.options.css.push('vuetify/dist/vuetify.css')
+    }
+
+    // Add Roboto font
+    if (options.assets.font) {
+      this.options.head.link.push({
+        rel: 'stylesheet',
+        type: 'text/css',
+        href: '//fonts.googleapis.com/css?family=Roboto:300,400,500,700'
+      })
     }
 
-    // Add Material Icons font
-    if (options.materialIcons) {
+    // Add Material Design Icons font
+    if (options.assets.icons) {
       this.options.head.link.push({
         rel: 'stylesheet',
         type: 'text/css',
-        href: '//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
+        href: '//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css'
       })
     }
 
+    // Enable tree-shaking with VuetifyLoader (https://github.com/vuetifyjs/vuetify-loader)
     if (options.treeShake) {
       const VuetifyLoader = this.nuxt.resolver.requireModule('vuetify-loader/lib/plugin')
 
@@ -40,8 +73,7 @@ module.exports = function (moduleOptions) {
 
     // Remove module options
     const vuetifyOptions = { ...options }
-    delete vuetifyOptions.css
-    delete vuetifyOptions.materialIcons
+    delete vuetifyOptions.assets
     delete vuetifyOptions.treeShake
 
     // Register plugin

commitlint.config.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 <% if (options.treeShake) { %>
-import Vuetify from 'vuetify/lib';
+import Vuetify from 'vuetify/lib'
 <% } else { %>
-import Vuetify from 'vuetify';
+import Vuetify from 'vuetify'
 <% } %>
 
 Vue.use(Vuetify)

husky.config.js

@@ -14,39 +14,42 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "nuxt example",
-    "lint": "eslint lib test",
-    "test": "npm run lint && jest",
-    "release": "standard-version && git push --follow-tags && npm publish"
+    "dev": "nuxt test/fixture",
+    "lint": "eslint .",
+    "test": "yarn lint && jest",
+    "release": "yarn test && standard-version && git push --follow-tags && npm publish"
   },
-  "eslintIgnore": [
-    "lib/plugin.js"
-  ],
   "files": [
     "lib"
   ],
   "dependencies": {
-    "vuetify": "^2.0.0-alpha.9"
-  },
-  "peerDependencies": {
+    "deepmerge": "^3.2.0",
+    "fibers": "^3.1.1",
+    "sass": "^1.18.0",
+    "sass-loader": "^7.1.0",
+    "vuetify": "^2.0.0-alpha.12",
     "vuetify-loader": "^1.2.1"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^0.0.1",
-    "babel-eslint": "^10.0.1",
-    "codecov": "^3.2.0",
-    "eslint": "^5.15.3",
+    "codecov": "^3.3.0",
+    "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-promise": "^4.1.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.2",
-    "jest": "^24.5.0",
-    "nuxt-edge": "^2.5.1-25886888.5d7757bf",
+    "jest": "^24.7.1",
+    "nuxt-edge": "^2.6.2-25912807.87fcf556",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.7",
     "standard-version": "^5.0.2"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true
   }
 }

jest.config.js

@@ -1,54 +1,54 @@
 <template>
   <v-app id="inspire" dark>
     <v-navigation-drawer v-model="drawer" fixed clipped app>
-      <v-list dense>
-        <v-list-tile v-for="item in items" :key="item.text">
-          <v-list-tile-action>
+      <v-list>
+        <v-list-item v-for="item in items" :key="item.text" link>
+          <v-list-item-action>
             <v-icon>{{ item.icon }}</v-icon>
-          </v-list-tile-action>
+          </v-list-item-action>
           <v-list-item-content>
             <v-list-item-title>
               {{ item.text }}
             </v-list-item-title>
           </v-list-item-content>
-        </v-list-tile>
-        <v-subheader class="mt-3 grey--text text--darken-1">
-          SUBSCRIPTIONS
+        </v-list-item>
+        <v-subheader class="mt-3 grey--text text--darken-1 text-uppercase">
+          Subscriptions
         </v-subheader>
         <v-list>
-          <v-list-tile v-for="item in items2" :key="item.text">
-            <v-list-tile-avatar>
+          <v-list-item v-for="item in items2" :key="item.text" link>
+            <v-list-item-avatar>
               <img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
-            </v-list-tile-avatar>
+            </v-list-item-avatar>
             <v-list-item-title v-text="item.text" />
-          </v-list-tile>
+          </v-list-item>
         </v-list>
-        <v-list-tile class="mt-3">
-          <v-list-tile-action>
+        <v-list-item class="mt-3">
+          <v-list-item-action>
             <v-icon color="grey darken-1">
-              add_circle_outline
+              mdi-plus-circle-outline
             </v-icon>
-          </v-list-tile-action>
+          </v-list-item-action>
           <v-list-item-title class="grey--text text--darken-1">
             Browse Channels
           </v-list-item-title>
-        </v-list-tile>
-        <v-list-tile>
-          <v-list-tile-action>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-action>
             <v-icon color="grey darken-1">
-              settings
+              mdi-settings
             </v-icon>
-          </v-list-tile-action>
+          </v-list-item-action>
           <v-list-item-title class="grey--text text--darken-1">
             Manage Subscriptions
           </v-list-item-title>
-        </v-list-tile>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
     <v-app-bar color="red" dense fixed clipped-left app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <v-icon class="mx-3">
-        fa-youtube
+        mdi-youtube
       </v-icon>
       <v-toolbar-title class="mr-5 align-center">
         <span class="title">Youtube</span>
@@ -58,7 +58,7 @@
         <v-text-field
           placeholder="Search..."
           single-line
-          append-icon="search"
+          append-icon="mdi-magnify"
           color="white"
           hide-details
         />
@@ -79,11 +79,13 @@ export default {
     return {
       drawer: true,
       items: [
-        { icon: 'trending_up', text: 'Most Popular' },
-        { icon: 'subscriptions', text: 'Subscriptions' },
-        { icon: 'history', text: 'History' },
-        { icon: 'featured_play_list', text: 'Playlists' },
-        { icon: 'watch_later', text: 'Watch Later' }
+        { icon: 'mdi-home', text: 'Home' },
+        { icon: 'mdi-fire', text: 'Trending' },
+        { icon: 'mdi-youtube-subscription', text: 'Subscriptions' },
+        { icon: 'mdi-folder', text: 'Library' },
+        { icon: 'mdi-history', text: 'History' },
+        { icon: 'mdi-clock', text: 'Watch Later' },
+        { icon: 'mdi-thumb-up', text: 'Liked videos' }
       ],
       items2: [
         { picture: 28, text: 'Joseph' },