diff --git a/.eslintignore b/.eslintignore
index 138b3e7b5a9..1656e7dd9f5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,18 +3,7 @@
 #   - the export statement
 # in the same file
 
-/test/integration/dynamic/index.js
-/test/integration/dynamic-css/index.js
-/test/integration/dynamic-esm/index.js
-/test/integration/dynamic-hoist/index.js
-/test/integration/dynamic-references-raw/index.js
-/test/integration/dynamic-references-raw/local.js
-/test/integration/hmr-dynamic/index.js
-/test/integration/wasm-async/index.js
-/test/integration/wasm-dynamic/index.js
-/test/integration/rust/index.js
-/test/integration/rust-deps/index.js
-/test/integration/rust-cargo/src/index.js
+/test/integration/**
 
 # Generated by the build
 lib
diff --git a/package.json b/package.json
index 924bec951c3..45735bca187 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "ws": "^4.0.0"
   },
   "devDependencies": {
+    "@vue/component-compiler-utils": "^1.0.0",
     "babel-cli": "^6.26.0",
     "babel-plugin-transform-async-super": "^1.0.0",
     "babel-register": "^6.26.0",
@@ -91,7 +92,9 @@
     "sinon": "^4.2.2",
     "sourcemap-validator": "^1.0.6",
     "stylus": "^0.54.5",
-    "typescript": "^2.7.0"
+    "typescript": "^2.7.0",
+    "vue": "^2.5.16",
+    "vue-template-compiler": "^2.5.16"
   },
   "scripts": {
     "test": "cross-env NODE_ENV=test mocha",
diff --git a/src/Bundler.js b/src/Bundler.js
index d8a90deed45..30c751f3188 100644
--- a/src/Bundler.js
+++ b/src/Bundler.js
@@ -69,6 +69,7 @@ class Bundler extends EventEmitter {
       typeof options.watch === 'boolean' ? options.watch : !isProduction;
     const target = options.target || 'browser';
     return {
+      production: isProduction,
       outDir: Path.resolve(options.outDir || 'dist'),
       outFile: options.outFile || '',
       publicURL: publicURL,
diff --git a/src/Parser.js b/src/Parser.js
index c5c82725fbb..a99ec484c8c 100644
--- a/src/Parser.js
+++ b/src/Parser.js
@@ -17,6 +17,7 @@ class Parser {
     this.registerExtension('ts', './assets/TypeScriptAsset');
     this.registerExtension('tsx', './assets/TypeScriptAsset');
     this.registerExtension('coffee', './assets/CoffeeScriptAsset');
+    this.registerExtension('vue', './assets/VueAsset');
     this.registerExtension('json', './assets/JSONAsset');
     this.registerExtension('json5', './assets/JSONAsset');
     this.registerExtension('yaml', './assets/YAMLAsset');
@@ -28,6 +29,7 @@ class Parser {
     this.registerExtension('css', './assets/CSSAsset');
     this.registerExtension('pcss', './assets/CSSAsset');
     this.registerExtension('styl', './assets/StylusAsset');
+    this.registerExtension('stylus', './assets/StylusAsset');
     this.registerExtension('less', './assets/LESSAsset');
     this.registerExtension('sass', './assets/SASSAsset');
     this.registerExtension('scss', './assets/SASSAsset');
diff --git a/src/assets/CSSAsset.js b/src/assets/CSSAsset.js
index e27a79303e7..ff1f282781c 100644
--- a/src/assets/CSSAsset.js
+++ b/src/assets/CSSAsset.js
@@ -119,7 +119,8 @@ class CSSAsset extends Asset {
     return [
       {
         type: 'css',
-        value: css
+        value: css,
+        cssModules: this.cssModules
       },
       {
         type: 'js',
diff --git a/src/assets/VueAsset.js b/src/assets/VueAsset.js
new file mode 100644
index 00000000000..03ec991cc96
--- /dev/null
+++ b/src/assets/VueAsset.js
@@ -0,0 +1,262 @@
+const Asset = require('../Asset');
+const localRequire = require('../utils/localRequire');
+const md5 = require('../utils/md5');
+const {minify} = require('uglify-es');
+
+class VueAsset extends Asset {
+  constructor(name, pkg, options) {
+    super(name, pkg, options);
+    this.type = 'js';
+  }
+
+  async parse(code) {
+    // Is being used in component-compiler-utils, errors if not installed...
+    this.vueTemplateCompiler = await localRequire(
+      'vue-template-compiler',
+      this.name
+    );
+    this.vue = await localRequire('@vue/component-compiler-utils', this.name);
+
+    return this.vue.parse({
+      source: code,
+      needMap: this.options.sourceMaps,
+      filename: this.relativeName, // Used for sourcemaps
+      sourceRoot: '' // Used for sourcemaps. Override so it doesn't use cwd
+    });
+  }
+
+  async generate() {
+    let descriptor = this.ast;
+    let parts = [];
+
+    if (descriptor.script) {
+      parts.push({
+        type: descriptor.script.lang || 'js',
+        value: descriptor.script.content,
+        sourceMap: descriptor.script.map
+      });
+    }
+
+    if (descriptor.template) {
+      parts.push({
+        type: descriptor.template.lang || 'html',
+        value: descriptor.template.content.trim()
+      });
+    }
+
+    if (descriptor.styles) {
+      for (let style of descriptor.styles) {
+        parts.push({
+          type: style.lang || 'css',
+          value: style.content.trim(),
+          modules: !!style.module
+        });
+      }
+    }
+
+    return parts;
+  }
+
+  async postProcess(generated) {
+    let result = [];
+
+    let hasScoped = this.ast.styles.some(s => s.scoped);
+    let id = md5(this.name).slice(-6);
+    let scopeId = hasScoped ? `data-v-${id}` : null;
+    let optsVar = '$' + id;
+
+    // Generate JS output.
+    let js = this.ast.script ? generated[0].value : '';
+    let supplemental = `
+      var ${optsVar} = exports.default || module.exports;
+      if (typeof ${optsVar} === 'function') {
+        ${optsVar} = ${optsVar}.options;
+      }
+    `;
+
+    supplemental += this.compileTemplate(generated, scopeId, optsVar);
+    supplemental += this.compileCSSModules(generated, optsVar);
+    supplemental += this.compileHMR(generated, optsVar);
+
+    if (this.options.minify && supplemental) {
+      let {code, error} = minify(supplemental, {toplevel: true});
+      if (error) {
+        throw error;
+      }
+
+      supplemental = code;
+    }
+
+    js += supplemental;
+
+    if (js) {
+      result.push({
+        type: 'js',
+        value: js
+      });
+    }
+
+    let map = generated.find(r => r.type === 'map');
+    if (map) {
+      result.push(map);
+    }
+
+    let css = this.compileStyle(generated, scopeId);
+    if (css) {
+      result.push({
+        type: 'css',
+        value: css
+      });
+    }
+
+    return result;
+  }
+
+  compileTemplate(generated, scopeId, optsVar) {
+    let html = generated.find(r => r.type === 'html');
+    if (html) {
+      let isFunctional = this.ast.template.attrs.functional;
+      let template = this.vue.compileTemplate({
+        source: html.value,
+        filename: this.relativeName,
+        compiler: this.vueTemplateCompiler,
+        isProduction: this.options.production,
+        isFunctional,
+        compilerOptions: {
+          scopeId
+        }
+      });
+
+      if (Array.isArray(template.errors) && template.errors.length >= 1) {
+        throw new Error(template.errors[0]);
+      }
+
+      return `
+        /* template */
+        Object.assign(${optsVar}, (function () {
+          ${template.code}
+          return {
+            render: render,
+            staticRenderFns: staticRenderFns,
+            _compiled: true,
+            _scopeId: ${JSON.stringify(scopeId)},
+            functional: ${JSON.stringify(isFunctional)}
+          };
+        })());
+      `;
+    }
+
+    return '';
+  }
+
+  compileCSSModules(generated, optsVar) {
+    let cssRenditions = generated.filter(r => r.type === 'css');
+    let cssModulesCode = '';
+    this.ast.styles.forEach((style, index) => {
+      if (style.module) {
+        let cssModules = JSON.stringify(cssRenditions[index].cssModules);
+        let name = style.module === true ? '$style' : style.module;
+        cssModulesCode += `\nthis[${JSON.stringify(name)}] = ${cssModules};`;
+      }
+    });
+
+    if (cssModulesCode) {
+      cssModulesCode = `function hook(){${cssModulesCode}\n}`;
+
+      let isFunctional =
+        this.ast.template && this.ast.template.attrs.functional;
+      if (isFunctional) {
+        return `
+          /* css modules */
+          (function () {
+            ${cssModulesCode}
+            ${optsVar}._injectStyles = hook;
+            var originalRender = ${optsVar}.render;
+            ${optsVar}.render = function (h, context) {
+              hook.call(context);
+              return originalRender(h, context);
+            };
+          })();
+        `;
+      } else {
+        return `
+          /* css modules */
+          (function () {
+            ${cssModulesCode}
+            ${optsVar}.beforeCreate = ${optsVar}.beforeCreate ? ${optsVar}.beforeCreate.concat(hook) : [hook];
+          })();
+        `;
+      }
+    }
+
+    return '';
+  }
+
+  compileStyle(generated, scopeId) {
+    return generated.filter(r => r.type === 'css').reduce((p, r, i) => {
+      let css = r.value;
+      let scoped = this.ast.styles[i].scoped;
+
+      // Process scoped styles if needed.
+      if (scoped) {
+        let {code, errors} = this.vue.compileStyle({
+          source: css,
+          filename: this.relativeName,
+          id: scopeId,
+          scoped
+        });
+
+        if (errors.length) {
+          throw errors[0];
+        }
+
+        css = code;
+      }
+
+      return p + css;
+    }, '');
+  }
+
+  compileHMR(generated, optsVar) {
+    if (!this.options.hmr) {
+      return '';
+    }
+
+    this.addDependency('vue-hot-reload-api');
+    this.addDependency('vue');
+
+    let cssHMR = '';
+    if (this.ast.styles.length) {
+      cssHMR = `
+        var reloadCSS = require('_css_loader');
+        module.hot.dispose(reloadCSS);
+        module.hot.accept(reloadCSS);
+      `;
+    }
+
+    let isFunctional = this.ast.template && this.ast.template.attrs.functional;
+
+    return `
+    /* hot reload */
+    (function () {
+      if (module.hot) {
+        var api = require('vue-hot-reload-api');
+        api.install(require('vue'));
+        if (api.compatible) {
+          module.hot.accept();
+          if (!module.hot.data) {
+            api.createRecord('${optsVar}', ${optsVar});
+          } else {
+            api.${
+              isFunctional ? 'rerender' : 'reload'
+            }('${optsVar}', ${optsVar});
+          }
+        }
+
+        ${cssHMR}
+      }
+    })();`;
+  }
+}
+
+module.exports = VueAsset;
diff --git a/src/builtins/hmr-runtime.js b/src/builtins/hmr-runtime.js
index 75f533497b1..42851884713 100644
--- a/src/builtins/hmr-runtime.js
+++ b/src/builtins/hmr-runtime.js
@@ -1,15 +1,21 @@
 var global = (1, eval)('this');
 var OldModule = module.bundle.Module;
+
 function Module(moduleName) {
   OldModule.call(this, moduleName);
   this.hot = {
+    data: module.bundle.hotData,
+    _acceptCallbacks: [],
+    _disposeCallbacks: [],
     accept: function (fn) {
-      this._acceptCallback = fn || function () {};
+      this._acceptCallbacks.push(fn || function () {});
     },
     dispose: function (fn) {
-      this._disposeCallback = fn;
+      this._disposeCallbacks.push(fn);
     }
   };
+
+  module.bundle.hotData = null;
 }
 
 module.bundle.Module = Module;
@@ -102,16 +108,25 @@ function hmrAccept(bundle, id) {
   }
 
   var cached = bundle.cache[id];
-  if (cached && cached.hot._disposeCallback) {
-    cached.hot._disposeCallback();
+  bundle.hotData = {};
+  if (cached) {
+    cached.hot.data = bundle.hotData;
+  }
+
+  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
+    cached.hot._disposeCallbacks.forEach(function (cb) {
+      cb(bundle.hotData);
+    });
   }
 
   delete bundle.cache[id];
   bundle(id);
 
   cached = bundle.cache[id];
-  if (cached && cached.hot && cached.hot._acceptCallback) {
-    cached.hot._acceptCallback();
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    cached.hot._acceptCallbacks.forEach(function (cb) {
+      cb();
+    });
     return true;
   }
 
diff --git a/src/transforms/postcss.js b/src/transforms/postcss.js
index 4944ae26aaf..6e861503b29 100644
--- a/src/transforms/postcss.js
+++ b/src/transforms/postcss.js
@@ -24,7 +24,10 @@ async function getConfig(asset) {
       '.postcssrc.js',
       'postcss.config.js'
     ]));
-  if (!config && !asset.options.minify) {
+
+  let enableModules =
+    asset.options.rendition && asset.options.rendition.modules;
+  if (!config && !asset.options.minify && !enableModules) {
     return;
   }
 
@@ -44,7 +47,7 @@ async function getConfig(asset) {
 
   config.plugins = await loadPlugins(config.plugins, asset.name);
 
-  if (config.modules) {
+  if (config.modules || enableModules) {
     let postcssModules = await localRequire('postcss-modules', asset.name);
     config.plugins.push(postcssModules(postcssModulesConfig));
   }
diff --git a/test/integration/vue-basic/Basic.vue b/test/integration/vue-basic/Basic.vue
new file mode 100755
index 00000000000..4bde2d4fe85
--- /dev/null
+++ b/test/integration/vue-basic/Basic.vue
@@ -0,0 +1,19 @@
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        msg: 'Hello from Component A!'
+      }
+    }
+  }
+</script>
+
+<style>
+  comp-a h2 {
+    color: #f00;
+  }
+</style>
diff --git a/test/integration/vue-css-modules/App.vue b/test/integration/vue-css-modules/App.vue
new file mode 100755
index 00000000000..d3ac18c1f11
--- /dev/null
+++ b/test/integration/vue-css-modules/App.vue
@@ -0,0 +1,32 @@
+<style module>
+.red {
+  color: red;
+}
+</style>
+
+<style module="a">
+.green {
+  color: green;
+}
+</style>
+
+<template>
+<div>
+  <p :class="$style.red">
+    This should be red
+  </p>
+  <p :class="a.green">
+    This should be green
+  </p>
+</div>
+</template>
+
+<script>
+export default {
+  created () {
+    console.log(this.$style.red)
+    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
+    // an identifier generated based on filename and className.
+  }
+}
+</script>
diff --git a/test/integration/vue-dependencies/App.vue b/test/integration/vue-dependencies/App.vue
new file mode 100755
index 00000000000..e3005cb70f7
--- /dev/null
+++ b/test/integration/vue-dependencies/App.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank">Community Chatt!!!</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App!'
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
diff --git a/test/integration/vue-dependencies/assets/logo.png b/test/integration/vue-dependencies/assets/logo.png
new file mode 100755
index 00000000000..f3d2503fc2a
Binary files /dev/null and b/test/integration/vue-dependencies/assets/logo.png differ
diff --git a/test/integration/vue-functional/functional.vue b/test/integration/vue-functional/functional.vue
new file mode 100755
index 00000000000..92ced40c845
--- /dev/null
+++ b/test/integration/vue-functional/functional.vue
@@ -0,0 +1,15 @@
+<template functional>
+  <div>
+    <h2 :class="$style.red">{{ props.msg }}</h2>
+    <slot></slot>
+    <slot name="slot2"></slot>
+    <div>Some <span>text</span></div>
+    <div v-if="false">Not exist</div>
+  </div>
+</template>
+
+<style module>
+.red {
+  color: red;
+}
+</style>
diff --git a/test/integration/vue-nested-components/insidecomp.vue b/test/integration/vue-nested-components/insidecomp.vue
new file mode 100755
index 00000000000..c409d87854d
--- /dev/null
+++ b/test/integration/vue-nested-components/insidecomp.vue
@@ -0,0 +1,11 @@
+<template lang="html">
+  <div>inside</div>
+</template>
+
+<script>
+  export default { }
+</script>
+
+<style scoped>
+  div { color: red; }
+</style>
diff --git a/test/integration/vue-nested-components/testcomp.vue b/test/integration/vue-nested-components/testcomp.vue
new file mode 100755
index 00000000000..e6d59acc976
--- /dev/null
+++ b/test/integration/vue-nested-components/testcomp.vue
@@ -0,0 +1,14 @@
+<template lang="html">
+  <div>
+    test component start:
+    <component :is="compName" />
+    end.
+  </div>
+</template>
+
+<script>
+  export default {
+    components: { InsideComp: () => import('./insidecomp') },
+    props: [ 'compName' ]
+  }
+</script>
\ No newline at end of file
diff --git a/test/integration/vue-preprocessors/pre-processors.vue b/test/integration/vue-preprocessors/pre-processors.vue
new file mode 100755
index 00000000000..a577d0567a5
--- /dev/null
+++ b/test/integration/vue-preprocessors/pre-processors.vue
@@ -0,0 +1,34 @@
+<style lang="stylus">
+font-stack = Helvetica, sans-serif
+primary-color = #999
+body
+  font 100% font-stack
+  color primary-color
+</style>
+
+<style lang="sass">
+$red: red;
+h1 {
+  background: $red;
+}
+</style>
+
+<style lang="less">
+@green: green;
+h1 {
+  color: @green;
+}
+</style>
+
+<template lang="jade">
+div
+  h1 This is the app
+  comp-a
+  comp-b
+</template>
+
+<script lang="coffee">
+module.exports =
+  data: ->
+    msg: 'Hello from coffee!'
+</script>
diff --git a/test/integration/vue-scoped/App.vue b/test/integration/vue-scoped/App.vue
new file mode 100755
index 00000000000..803381a26dc
--- /dev/null
+++ b/test/integration/vue-scoped/App.vue
@@ -0,0 +1,28 @@
+<style scoped>
+.test {
+  color: yellow;
+}
+.test:after {
+  content: 'bye!';
+}
+h1 {
+  color: green;
+}
+</style>
+
+<template>
+<div>
+  <div><h1>hi</h1></div>
+  <p class="abc def">hi</p>
+  <template v-if="ok"><p class="test">yo</p></template>
+  <svg><template><p></p></template></svg>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return { ok: true }
+  }
+}
+</script>
diff --git a/test/vue.js b/test/vue.js
new file mode 100644
index 00000000000..697af17f1de
--- /dev/null
+++ b/test/vue.js
@@ -0,0 +1,237 @@
+const assert = require('assert');
+const {bundle, assertBundleTree, run} = require('./utils');
+const fs = require('fs');
+
+describe('vue', function() {
+  it('should produce a basic vue bundle', async function() {
+    let b = await bundle(__dirname + '/integration/vue-basic/Basic.vue');
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['Basic.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.staticRenderFns, []);
+    assert.equal(output._compiled, true);
+    assert.deepEqual(output.data(), {msg: 'Hello from Component A!'});
+  });
+
+  it('should produce a vue bundle with dependencies', async function() {
+    let b = await bundle(__dirname + '/integration/vue-dependencies/App.vue');
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['App.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        },
+        {
+          assets: ['logo.png'],
+          type: 'png'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.equal(output.staticRenderFns.length, 2);
+    assert.deepEqual(output.data(), {msg: 'Welcome to Your Vue.js App!'});
+  });
+
+  it('should produce a vue bundle using preprocessors', async function() {
+    let b = await bundle(
+      __dirname + '/integration/vue-preprocessors/pre-processors.vue'
+    );
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['pre-processors.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b);
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.staticRenderFns, []);
+    assert.deepEqual(output.data(), {msg: 'Hello from coffee!'});
+
+    let contents = fs.readFileSync(
+      __dirname + '/dist/pre-processors.css',
+      'utf8'
+    );
+    assert(contents.includes('color: #999'));
+    assert(contents.includes('background: red'));
+    assert(contents.includes('color: green'));
+  });
+
+  it('should produce a vue bundle using a functional component', async function() {
+    let b = await bundle(
+      __dirname + '/integration/vue-functional/functional.vue'
+    );
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['functional.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        }
+      ]
+    });
+
+    let output = run(b);
+    assert.equal(typeof output.render, 'function');
+    assert.equal(output.staticRenderFns.length, 1);
+    assert.equal(output.functional, true);
+    assert.equal(typeof output._injectStyles, 'function');
+
+    let ctx = {};
+    output._injectStyles.call(ctx);
+    assert.equal(typeof ctx.$style.red, 'string');
+
+    let contents = fs.readFileSync(__dirname + '/dist/functional.css', 'utf8');
+    assert(contents.includes('.' + ctx.$style.red));
+  });
+
+  it('should produce a vue bundle using scoped styles', async function() {
+    let b = await bundle(__dirname + '/integration/vue-scoped/App.vue');
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['App.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.equal(output.staticRenderFns.length, 1);
+    assert(/^data-v-[0-9a-h]{6}$/.test(output._scopeId));
+    assert.deepEqual(output.data(), {ok: true});
+
+    let contents = fs.readFileSync(__dirname + '/dist/App.css', 'utf8');
+    assert(contents.includes(`.test[${output._scopeId}]`));
+  });
+
+  it('should produce a vue bundle using CSS modules', async function() {
+    let b = await bundle(__dirname + '/integration/vue-css-modules/App.vue');
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['App.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.staticRenderFns, []);
+    assert(Array.isArray(output.beforeCreate));
+    assert.equal(typeof output.beforeCreate[0], 'function');
+
+    let ctx = {};
+    output.beforeCreate[0].call(ctx);
+    assert.equal(typeof ctx.$style.red, 'string');
+
+    let contents = fs.readFileSync(__dirname + '/dist/App.css', 'utf8');
+    assert(contents.includes('.' + ctx.$style.red));
+  });
+
+  it('should bundle nested components dynamically', async function() {
+    let b = await bundle(
+      __dirname + '/integration/vue-nested-components/testcomp.vue'
+    );
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: [
+        'testcomp.vue',
+        'bundle-loader.js',
+        'bundle-url.js',
+        'css-loader.js',
+        'js-loader.js'
+      ],
+      childBundles: [
+        {
+          type: 'js',
+          assets: ['insidecomp.vue'],
+          childBundles: [
+            {
+              type: 'css'
+            },
+            {
+              type: 'map'
+            }
+          ]
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.staticRenderFns, []);
+    assert.equal(output._compiled, true);
+
+    assert.equal(typeof output.components.InsideComp, 'function');
+  });
+
+  it('should produce a basic production vue bundle', async function() {
+    let b = await bundle(__dirname + '/integration/vue-basic/Basic.vue', {
+      production: true
+    });
+
+    assertBundleTree(b, {
+      type: 'js',
+      assets: ['Basic.vue'],
+      childBundles: [
+        {
+          type: 'css'
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = run(b).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.staticRenderFns, []);
+    assert.equal(output._compiled, true);
+    assert.deepEqual(output.data(), {msg: 'Hello from Component A!'});
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 0d54350d53a..4735cc5bccd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,6 +18,19 @@
   dependencies:
     "@types/babel-types" "*"
 
+"@vue/component-compiler-utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-1.0.0.tgz#edcb00f656202c95091f07b0fe63a75e69b35614"
+  dependencies:
+    consolidate "^0.15.1"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.2"
+    postcss "^6.0.20"
+    postcss-selector-parser "^3.1.1"
+    prettier "^1.11.1"
+    source-map "^0.5.6"
+    vue-template-es2015-compiler "^1.6.0"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -855,7 +868,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.0.5:
+bluebird@^3.0.5, bluebird@^3.1.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1125,7 +1138,7 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
   dependencies:
@@ -1415,6 +1428,12 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
+consolidate@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
+  dependencies:
+    bluebird "^3.1.1"
+
 constantinople@^3.0.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647"
@@ -1683,6 +1702,10 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+
 deasync@^0.1.12:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.12.tgz#0159492a4133ab301d6c778cf01e74e63b10e549"
@@ -1882,6 +1905,12 @@ domutils@^1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
+dot-prop@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  dependencies:
+    is-obj "^1.0.0"
+
 dotenv@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
@@ -2793,6 +2822,10 @@ hash-base@^3.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+hash-sum@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
@@ -2818,7 +2851,7 @@ hawk@~6.0.2:
     hoek "4.x.x"
     sntp "2.x.x"
 
-he@1.1.1:
+he@1.1.1, he@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
@@ -3187,7 +3220,7 @@ is-number@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
 
-is-obj@^1.0.1:
+is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
@@ -3968,7 +4001,7 @@ lru-cache@^3.2.0:
   dependencies:
     pseudomap "^1.0.1"
 
-lru-cache@^4.0.1:
+lru-cache@^4.0.1, lru-cache@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.2.tgz#45234b2e6e2f2b33da125624c4664929a0224c3f"
   dependencies:
@@ -4999,6 +5032,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -5053,6 +5094,14 @@ postcss@^6.0.1, postcss@^6.0.19:
     source-map "^0.6.1"
     supports-color "^5.2.0"
 
+postcss@^6.0.20:
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
+  dependencies:
+    chalk "^2.3.2"
+    source-map "^0.6.1"
+    supports-color "^5.3.0"
+
 posthtml-include@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/posthtml-include/-/posthtml-include-1.1.0.tgz#6a11efff05dfba4e9f29788dea1d17248f04f1e1"
@@ -5104,7 +5153,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.9.1:
+prettier@^1.11.1, prettier@^1.9.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.1.tgz#61e43fc4cd44e68f2b0dfc2c38cd4bb0fccdcc75"
 
@@ -6579,6 +6628,21 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-template-compiler@^2.5.16:
+  version "2.5.16"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.1.0"
+
+vue-template-es2015-compiler@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
+
+vue@^2.5.16:
+  version "2.5.16"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"