Add vue loader

index.js

@@ -341,6 +341,19 @@ module.exports = {
         return this;
     },
 
+    /**
+     * If enabled, the vue-loader is added:
+     * https://vue-loader.vuejs.org/en/
+     *
+     * @param {object} options see https://vue-loader.vuejs.org/en/configurations/advanced.html
+     * @return {exports}
+     */
+    enableVueLoader(options = {}) {
+        webpackConfig.enableVueLoader(options);
+
+        return this;
+    },
+
     /**
      * If enabled, the output directory is emptied between
      * each build (to remove old files).

lib/WebpackConfig.js

@@ -45,6 +45,8 @@ class WebpackConfig {
             resolve_url_loader: true
         };
         this.useLessLoader = false;
+        this.useVueLoader = false;
+        this.vueOptions = {};
         this.cleanupOutput = false;
         this.sharedCommonsEntryName = null;
         this.providedVariables = {};
@@ -222,6 +224,11 @@ class WebpackConfig {
         this.useReact = true;
     }
 
+    enableVueLoader(options) {
+        this.useVueLoader = true;
+        this.vueOptions = options;
+    }
+
     cleanupOutputBeforeBuild() {
         this.cleanupOutput = true;
     }

lib/config-generator.js

@@ -235,6 +235,16 @@ class ConfigGenerator {
             });
         }
 
+        if (this.webpackConfig.useVueLoader) {
+            loaderFeatures.ensureLoaderPackagesExist('vue');
+
+            rules.push({
+                test: /\.vue/,
+                loader: 'vue-loader',
+                options: this.webpackConfig.vueOptions
+            });
+        }
+
         this.webpackConfig.loaders.forEach((loader) => {
             rules.push(loader);
         });

lib/loader-features.js

@@ -35,6 +35,11 @@ const loaderFeatures = {
         method: 'enableReactPreset()',
         packages: ['babel-preset-react'],
         description: 'process React JS files'
+    },
+    vue: {
+        method: 'enableVueLoader()',
+        packages: ['vue-loader', 'vue-template-compiler'],
+        description: 'load VUE files'
     }
 };
 

test/WebpackConfig.js

@@ -278,6 +278,23 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enableVueLoader', () => {
+        it('Call with no config', () => {
+            const config = createConfig();
+            config.enableVueLoader();
+
+            expect(config.useVueLoader).to.be.true;
+        });
+
+        it('Pass config', () => {
+            const config = createConfig();
+            config.enableVueLoader({ extractCSS: true });
+
+            expect(config.useVueLoader).to.be.true;
+            expect(config.vueOptions.extractCSS).to.be.true;
+        });
+    });
+
     describe('addPlugin', () => {
         it('extends the current registered plugins', () => {
             const config = createConfig();