The other day someone was discussing with me his love for all things React and JSX. The topic of Vue came up and I explained to him that he could use JSX in Vue.js too. He asked me how, and actually, I didn't know. So I decided to find out. (It's really simple, read below to find out)

Setup of Vue-CLI with Webpack

The easiest way of getting Vue.js setup with JSX is to install the babel transform plugin!

It was pretty straight forward. Before we get any further, make sure you have Vue CLI installed! You'll need Node.js, which I won't get into here. It's really simple.

After you have the CLI installed create a new app.

$ vue init webpack my-jsx-project

Answer the prompts, and go through. You can just hit No to everything if you like. This will install the scaffolding for your project using wepback.

After it's installed you'll need to install the dependencies and start the server.

$ cd my-jsx-project
$ npm install
$ npm run dev

If you open up your web browser to localhost:8080 you should see the welcome page.

JSX Install

After the app is installed and working. Install the JSX babel transformations.

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev

The last thing you need to do is update your .babelrc file in your folder.

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

In my .babelrc file I already had a preset and plugin section at the top. I just added "es2015" to the presets array and "transform-vue-jsx" to the plugins array. Don't make the mistake I did and add it to the test section. Oops.

The last thing to do is open up the Hello.vue single file component. I simply deleted out the top template and in the Vue instance at the bottom I added the render function.

...
render(h) {
   return ( <div id="app>
                Hello World
            </div>
   )
}

I stopped and restarted my server and ran npm run dev. The website came up with my new Vue.js JSX template! Woot.

I made a video below explaining this process in a little more detail! Check it out!

Conclusion

Let me know if you can get JSX running on Vue.js too! Leave a comment below! And if you're interested in learning a lot more about Vue.js checkout my new book from Manning, Vue.js in Action! Thanks!

How To Setup Up Vue.js With JSX - A Quick Guide