Non compiled

README.md

@@ -146,6 +146,27 @@ These are the preprocessors supported by vueify out of the box:
 - pug
 - coffee-script (use `coffee` in [config section](#configuring-options))
 
+## Building for modern browsers
+
+If you're developing for modern browsers and you don't need to transpile your code you can use `noncompiled` value in lang attribute.
+Just make sure to use `commonjs` module syntax:
+
+``` vue
+<template>
+  <h2>{{msg}}</h2>
+</template>
+
+<script>
+module.exports = {
+  data () {
+    return {
+      msg: 'Non Compiled Component!'
+    }
+  }
+}
+</script>
+```
+
 ## PostCSS
 
 Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.

lib/compilers/babel.js

@@ -23,20 +23,20 @@ function getBabelRc () {
   return rc
 }
 
-if (babelOptions === defaultBabelOptions) {
-  try {
-    ensureRequire('babel', ['babel-preset-es2015', 'babel-runtime', 'babel-plugin-transform-runtime'])
-  } catch (e) {
-    console.error(e.message)
-    console.error(
-      '\n^^^ You are seeing this because you are using Vueify\'s default babel ' +
-      'configuration. You can override this with .babelrc or the babel option ' +
-      'in vue.config.js.'
-    )
+module.exports = function (raw, cb, compiler, filePath) {
+  if (babelOptions === defaultBabelOptions) {
+    try {
+      ensureRequire('babel', ['babel-preset-es2015', 'babel-runtime', 'babel-plugin-transform-runtime'])
+    } catch (e) {
+      console.error(e.message)
+      console.error(
+        '\n^^^ You are seeing this because you are using Vueify\'s default babel ' +
+        'configuration. You can override this with .babelrc or the babel option ' +
+        'in vue.config.js.'
+      )
+    }
   }
-}
 
-module.exports = function (raw, cb, compiler, filePath) {
   try {
     var babel = require('babel-core')
     var options = assign({

lib/compilers/noncompiled.js

@@ -0,0 +1,6 @@
+var ensureRequire = require('../ensure-require.js')
+
+module.exports = function (raw, cb) {
+  ensureRequire('skip-compilers', [])
+  cb(null, raw)
+}

test/fixtures/noncompiled.vue

@@ -0,0 +1,13 @@
+<template>
+  <h2>{{msg}}</h2>
+</template>
+
+<script>
+module.exports = {
+  data () {
+    return {
+      msg: 'Hello from Non Compiled Component!'
+    }
+  }
+}
+</script>

test/fixtures/script-import.js

@@ -4,4 +4,4 @@ export default {
       msg: 'Hello from Component A!'
     }
   }
-};
+}

test/test.js

@@ -134,6 +134,12 @@ describe('vueify', () => {
     expect(style).to.contain('@media print {\n  .foo[' + id + '] {\n    color: #000;\n  }\n}')
   })
 
+  test('noncompiled', window => {
+    const module = window.vueModule
+    assertRenderFn(module, '<h2>{{msg}}</h2>')
+    expect(module.data().msg).to.contain('Hello from Non Compiled Component!')
+  })
+
   testCssExtract('style-export', css => {
     expect(css).to.equal('h2 {color: red;}')
   })