feat(presets): add default preset option

connect vuetify-loader for a-la-carte

Author: johnleider

generator/index.js

@@ -1,9 +1,25 @@
+const defaults = {
+  preset: 'configure',
+  replaceComponents: true,
+  useTheme: false,
+  useCustomProperties: false,
+  iconFont: 'md',
+  installFonts: false,
+  useAlaCarte: true,
+  usePolyfill: true,
+  locale: 'en'
+}
+
 module.exports = (api, opts, rootOpts) => {
   const alaCarte = require('./tools/alaCarte')
   const fonts = require('./tools/fonts')
   const polyfill = require('./tools/polyfill')
   const vuetify = require('./tools/vuetify')
 
+  opts = opts.preset === 'default'
+    ? defaults
+    : opts
+
   vuetify.addDependencies(api)
   opts.useAlaCarte && alaCarte.addDependencies(api)
   opts.usePolyfill && polyfill.addDependencies(api)

generator/templates/default/src/components/HelloWorld.vue

@@ -6,6 +6,7 @@
     >
       <v-flex xs12>
         <v-img
+          :src="require('../assets/logo.svg')"
           class="my-3"
           contain
           height="200"
@@ -123,18 +124,19 @@
         }
       ],
       whatsNext: [
+        {
+          text: 'Explore components',
+          href: 'https://vuetifyjs.com/components/api-explorer'
+        },
         {
           text: 'Select a layout',
           href: 'https://vuetifyjs.com/layout/pre-defined'
         },
         {
           text: 'Frequently Asked Questions',
           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
-        },
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer'
         }
+
       ]
     })
   }

generator/templates/default/src/plugins/vuetify.js

@@ -1,23 +1,6 @@
 import Vue from 'vue'
 <%_ if (useAlaCarte) { _%>
-// For information on how to automate this process
-// Checkout https://vuetifyjs.com/guides/a-la-carte#vuetify-loader
-
-import Vuetify, {
-  VApp,
-  VBtn,
-  VContainer,
-  VContent,
-  VFlex,
-  VFooter,
-  VIcon,
-  VImg,
-  VLayout,
-  VNavigationDrawer,
-  VSpacer,
-  VToolbar,
-  VToolbarTitle
-} from 'vuetify/lib'
+import Vuetify from 'vuetify/lib'
 import 'vuetify/src/stylus/app.styl'
 <%_ } else { _%>
 import Vuetify from 'vuetify'
@@ -28,23 +11,6 @@ import <%= locale.replace(/-/g, '') %> from 'vuetify/<%= typescript ? 'src' : 'e
 <%_ } _%>
 
 Vue.use(Vuetify, {
-<%_ if (useAlaCarte) { _%>
-  components: {
-    VApp,
-    VBtn,
-    VContainer,
-    VContent,
-    VFlex,
-    VFooter,
-    VIcon,
-    VImg,
-    VLayout,
-    VNavigationDrawer,
-    VSpacer,
-    VToolbar,
-    VToolbarTitle
-  },
-<%_ } _%>
 <%_ if (useTheme) { _%>
   theme: {
     primary: '#ee44aa',

generator/tools/alaCarte.js

@@ -1,6 +1,7 @@
 function addDependencies (api) {
   api.extendPackage({
     devDependencies: {
+      "vuetify-loader": "^1.0.5",
       "stylus": "^0.54.5",
       "stylus-loader": "^3.0.1",
     }

index.js

@@ -1 +1,14 @@
-module.exports = (api, opts) => {}
+const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
+
+module.exports = (api, opts) => {
+  const hasVuetifyLoader = Boolean(
+    api.service.pkg.devDependencies['vuetify-loader'] ||
+    api.service.pkg.dependencies['vuetify-loader']
+  )
+
+  if (hasVuetifyLoader) {
+    api.configureWebpack(webpackConfig => {
+      webpackConfig.plugins.push(new VuetifyLoaderPlugin())
+    })
+  }
+}

package.json

@@ -24,6 +24,8 @@
   },
   "homepage": "https://github.com/vuetifyjs/vue-cli-plugin-vuetify#readme",
   "devDependencies": {
-    "@vue/cli-service": "^3.0.1"
-  }
+    "@vue/cli-service": "^3.0.1",
+    "vuetify-loader": "^1.0.5"
+  },
+  "dependencies": {}
 }

prompts.js

@@ -1,21 +1,37 @@
+function isCustom (answers) {
+  return answers.preset === 'configure'
+}
+
 module.exports = [
+  {
+    name: 'preset',
+    type: 'list',
+    choices: [
+      { name: 'default (recommended)', value: 'default' },
+      { name: 'configure', value: 'configure' }
+    ],
+    default: 'default'
+  },
   {
     name: 'replaceComponents',
     type: 'confirm',
     message: 'Use a pre-made template? (will replace App.vue and HelloWorld.vue)',
     default: true,
+    when: isCustom
   },
   {
     name: 'useTheme',
     type: 'confirm',
     message: 'Use custom theme?',
     default: false,
+    when: isCustom
   },
   {
     name: 'useCustomProperties',
     type: 'confirm',
     message: 'Use custom properties (CSS variables)?',
     default: false,
+    when: isCustom
   },
   {
     name: 'iconFont',
@@ -35,25 +51,29 @@ module.exports = [
         'Font Awesome 5': 'fa',
         'Font Awesome 4': 'fa4',
       }[val]
-    }
+    },
+    when: isCustom
   },
   {
     name: 'installFonts',
     type: 'confirm',
     message: 'Use fonts as a dependency (for Electron or offline)?',
     default: false,
+    when: isCustom
   },
   {
     name: 'useAlaCarte',
     type: 'confirm',
     message: 'Use a-la-carte components?',
-    default: false,
+    default: true,
+    when: isCustom
   },
   {
     name: 'usePolyfill',
     type: 'confirm',
     message: 'Use babel/polyfill?',
-    default: true
+    default: true,
+    when: isCustom
   },
   {
     name: 'locale',
@@ -93,6 +113,7 @@ module.exports = [
         'Ukrainian': 'uk',
         'Serbian (cyrillic)': 'sr-Cyrl',
       }[val]
-    }
+    },
+    when: isCustom
   }
 ]