refactor(v3): VuetifyLoaderPlugin (#308)

Author: ElijahKotyluk

packages/vue-cli-plugin-vuetify/generator/index.js

@@ -1,4 +1,5 @@
 module.exports = (api, opts) => {
+  const { fileExists } = require('../util/helpers')
   const alaCarte = require('./tools/alaCarte')
   const fonts = require('./tools/fonts')
   const polyfill = require('./tools/polyfill')
@@ -31,7 +32,7 @@ module.exports = (api, opts) => {
   if (opts.installFonts) fonts.addDependencies(api, opts.iconFont)
 
   // Update vue.config.js for transpileDependency if AlaCarte
-  if (opts.useAlaCarte && !opts.useVite) alaCarte.addVueConfigTranspileDependency(api)
+  if (opts.useAlaCarte && !opts.useVite) alaCarte.addVueConfigVuetify(api, opts.useV3)
 
   // Update templates
   vuetify.renderFiles(api, { opts })
@@ -42,13 +43,20 @@ module.exports = (api, opts) => {
       polyfill.updateBabelConfig(api)
       polyfill.updateBrowsersList(api)
     }
+    
     if (!opts.installFonts) fonts.addLinks(api, opts.iconFont)
     vuetify.setHtmlLang(api, opts.locale)
 
-    if (fs.existsSync('src/public/index.html')) {
+    if (fileExists(api, 'src/public/index.html')) {
       fs.unlinkSync(api.resolve('src/public/index.html'))
     }
 
+    const configFile = api.resolve('./vue.config.js');
+
+    if (fileExists(api, configFile)) {
+      vuetify.addVuetifyLoaderDocsLink(configFile)
+    }
+
     api.exitLog('Discord community: https://community.vuetifyjs.com')
     api.exitLog('Github: https://github.com/vuetifyjs/vuetify')
     api.exitLog('Support Vuetify: https://github.com/sponsors/johnleider')

packages/vue-cli-plugin-vuetify/generator/tools/alaCarte.js

@@ -16,6 +16,16 @@ function addDependencies (api, useV3) {
   api.extendPackage(deps)
 }
 
+function addVueConfigPluginOptions(api) {
+  api.extendPackage({
+    vue: {
+      pluginOptions: {
+        vuetify: {},
+      },
+    },
+  })
+}
+
 function addVueConfigTranspileDependency (api) {
   api.extendPackage({
     vue: {
@@ -26,7 +36,11 @@ function addVueConfigTranspileDependency (api) {
   })
 }
 
+function addVueConfigVuetify(api, useV3) {
+  useV3 ? addVueConfigPluginOptions(api) : addVueConfigTranspileDependency(api)
+}
+
 module.exports = {
   addDependencies,
-  addVueConfigTranspileDependency,
+  addVueConfigVuetify,
 }

packages/vue-cli-plugin-vuetify/generator/tools/vuetify.js

@@ -1,4 +1,5 @@
 // Imports
+const fs = require('fs')
 const helpers = require('./helpers')
 
 function addDependencies (api, v3) {
@@ -28,7 +29,6 @@ function renderFiles (api, { opts }) {
   }
 
   // Render files if we're replacing
-  const fs = require('fs')
   const routerPath = api.resolve(`./src/router/index.${ext}`)
   const storePath = api.resolve(`./src/store/index.${ext}`)
 
@@ -77,9 +77,24 @@ function setHtmlLang (api, locale) {
   })
 }
 
+function addVuetifyLoaderDocsLink(configFile) {
+  const vuetifyLoaderLink = '// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader'
+
+  let content = fs.readFileSync(configFile, { encoding: 'utf8' })
+
+  content = content.replace('vuetify: {}', `vuetify: {\n\t\t\t${vuetifyLoaderLink}\n\t\t}`)
+
+  fs.writeFileSync(
+    configFile,
+    content,
+    { encoding: 'utf8' }
+  )
+}
+
 module.exports = {
   addDependencies,
   addImports,
+  addVuetifyLoaderDocsLink,
   renderFiles,
   setHtmlLang,
 }

packages/vue-cli-plugin-vuetify/index.js

@@ -3,7 +3,7 @@ const { mergeRules } = require('./util/helpers')
 
 const semver = require('semver')
 
-module.exports = (api) => {
+module.exports = (api, options) => {
   const dependencies = api.service.pkg.dependencies || {}
   const devDependencies = api.service.pkg.devDependencies || {}
 
@@ -12,15 +12,27 @@ module.exports = (api) => {
     dependencies['vuetify-loader'],
   )
 
+  const isVue3 = semver.major(require('vue/package.json').version) === 3
+
   if (hasVuetifyLoader) {
-    const vueVersion = semver.major(require('vue/package.json').version)
-    const VuetifyLoaderPlugin = vueVersion === 3 ? require('vuetify-loader').VuetifyLoaderPlugin : require('vuetify-loader/lib/plugin')
+    if (isVue3) {
+      const VuetifyLoaderPlugin = require('vuetify-loader').VuetifyLoaderPlugin
+      
+      api.chainWebpack(config => {
+        config
+          .plugin('VuetifyLoaderPlugin')
+          .use(VuetifyLoaderPlugin, [options.pluginOptions.vuetify])
+      })
+    }
+    else {
+      const VuetifyLoaderPlugin = require('vuetify-loader')
 
-    api.chainWebpack(config => {
-      config
-        .plugin('VuetifyLoaderPlugin')
-        .use(VuetifyLoaderPlugin)
-    })
+      api.chainWebpack(config => {
+        config
+          .plugin('VuetifyLoaderPlugin')
+          .use(VuetifyLoaderPlugin)
+      })
+    }
   }
 
   // Resolve asset references from components
@@ -64,7 +76,7 @@ module.exports = (api) => {
   }
 
   // Bootstrap SASS Variables
-  api.chainWebpack(config => {
+  if (!isVue3) api.chainWebpack(config => {
     ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(match => {
       for (let i = 0; i < 2; i++) {
         const boolean = Boolean(i)