But JSX is not meant to be interpreted by the browser. It must be first transpiled into standard Javascript, similar to how SASS first needs to be transpiled to CSS.

Vue with JSX

The Vue framework doesn’t specificallysupport JSX….it doesn’t need to since JSX is transpiled into standard Javascript.

So then how do they work together? Because Vue has a virtual DOM implementation, you can use JSX or any pre-processed language so long as it transpiles to something valid for the render function.

A new plugin called babel-plugin-transform-vue-jsx has been introduced to the Vue ecosystem to do exactly that. We’ll look at how to use it in a moment.

Why use JSX with Vue?

But firstly, why use JSX? It’s not required, or even recommend, it’s just a matter of taste. Some people find it much easier to use JSX syntax than to use the render function with pure JS. Others find it dirty to mix HTML in with their JS.

All it does is displays a span with the text content “Click to see the message”. When you click the span it will trigger an alert. Crazy stuff, right?!

Using a Vue 2 render function instead

In Vue.js 2.0 we can now use a render function to create our reactive element. The following code does exactly the same thing as the above code, the only difference here is that rather than creating a “real” span element, we create a virtual span element which Vue will then render via it’s virtual DOM:

babel-plugin-transform-vue-jsx

As previously explained, the JSX in that third example will need to be transpiled, so there’s an additional build step which we’ll demonstrate briefly. We’re going to use Babel and Webpack to do the transpiling.