Configured vuetify a-la-carte to import specific components (low buil…

…d size project)

babel.config.js

@@ -1,5 +1,13 @@
 module.exports = {
   presets: [
     '@vue/app'
+  ],
+  plugins: [
+    ["transform-imports", {
+      "vuetify": {
+        "transform": "vuetify/es5/components/${member}",
+        "preventFullImport": true
+      }
+    }]
   ]
 }

package.json

@@ -20,6 +20,7 @@
     "@vue/cli-plugin-pwa": "^3.0.0-rc.10",
     "@vue/cli-service": "^3.0.0-rc.10",
     "@vue/eslint-config-standard": "^3.0.0-rc.10",
+    "babel-plugin-transform-imports": "^1.5.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.5.16"

src/main.js

@@ -1,9 +1,9 @@
 import Vue from 'vue'
-import './vuetify'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import './registerServiceWorker'
+import './vuetify'
 
 Vue.config.productionTip = false
 

src/vuetify.js

@@ -1,9 +1,36 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.min.css'
+import 'vuetify/src/stylus/app.styl'
 import manifestJSON from '../public/manifest.json'
 
+import {
+  Vuetify,
+  VApp,
+  VBtn,
+  VBtnToggle,
+  VCard,
+  VCheckbox,
+  VDivider,
+  VGrid,
+  VIcon,
+  VList,
+  VProgressLinear,
+  VTextField
+} from 'vuetify'
+
 Vue.use(Vuetify, {
+  components: {
+    VApp,
+    VBtn,
+    VBtnToggle,
+    VCard,
+    VCheckbox,
+    VDivider,
+    VGrid,
+    VIcon,
+    VList,
+    VProgressLinear,
+    VTextField
+  },
   theme: {
     primary: manifestJSON.theme_color
   }