JSX support

Author: Guillaume Chau

packages/vue-component/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 0.10.3 -2017-07-16
+## 0.10.5 - 2017-08-11
+
+ - Enable babelrc for vue files
+
+## 0.10.3 - 2017-07-16
 
  - Fixed component auto naming
 

packages/vue-component/README.md

@@ -150,6 +150,38 @@ Packages for `<style>` tag:
 
 Get involved! Add your own package with a PR! :+1:
 
+### JSX
+
+To add JSX support, install the following packages:
+
+```
+meteor npm i -D babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx
+```
+
+Then add a `.babelrc` file in the root directory of the meteor project with the following content:
+
+```json
+{
+  "plugins": [
+    "transform-vue-jsx"
+  ]
+}
+```
+
+You can now use JSX in your Vue components:
+
+```html
+<script>
+export default {
+  render (h) {
+    return <div class="home">
+      <h1>#404</h1>
+    </div>
+  }
+}
+</script>
+```
+
 ### Manual import
 
 You can then import your .vue component files in your meteor code:

packages/vue-component/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-component',
-  version: '0.10.4',
+  version: '0.10.5',
   summary: 'VueJS single-file components that hot-reloads',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'

packages/vue-component/plugin/tag-handler.js

@@ -165,6 +165,7 @@ VueComponentTagHandler = class VueComponentTagHandler {
       // Babel
       if(useBabel) {
         // Babel options
+        this.babelOptions.babelrc = true
         this.babelOptions.sourceMap = true;
         this.babelOptions.filename =
           this.babelOptions.sourceFileName = tag.basePath;