How to use JSX with Laravel and Vue with Laravel-Mix

Adam Mackintosh
2 min readApr 11, 2019

Do you find functional components to be a nightmare in Vue due to the horrific syntax? Well then stop doing it the hard way, and use JSX.

If you read that Twitter thread, you will see Adam has a name similar to mine and is recommending to use the steps exactly as shown at the URL:

The problem is, those steps are old and now Babel v7 exists, which changed the packages we need to use to make JSX work. I couldn’t find any reference material to help me do this, so I figured it out, and now you can take the time-shortcut by following these below instructions.


First, install these packages:

$ npm install --save-dev @babel/plugin-syntax-jsx
$ npm install --save-dev @vue/babel-plugin-transform-vue-jsx
$ npm install --save-dev @vue/babel-helper-vue-jsx-merge-props

Pro-style efficient:

$npm install --save-dev @babel/plugin-syntax-jsx @vue/babel-plugin-transform-vue-jsx @vue/babel-helper-vue-jsx-merge-props

Second, now you’re almost done. You just have to update the .babelrc file in your project root to this:

"plugins": ["@vue/babel-plugin-transform-vue-jsx"]

You don’t need to worry about the @babel/preset-env package because Laravel-Mix has its own config which I am too lazy to confirm, but I am pretty sure it’s already using it. While we are discussing this, you may be fascinated to know that Laravel-Mix also has its own .babelrc file and the one in your project root is compatible with it, as they are merged-somehow using magic.


Fig 1.0 — Before & After Comparison (source:


A bit later, I will probably add to this article with some reference material for how to use JSX, but in the meantime, you could visit pages such as:

and just read about the various ways you can utilize JSX.

For example, rather than @click.prevent=”handleClick", you can do onClick:prevent={handleClick}. Rather than :value="cats", you can do value={cats}. If you want to get aggressive, you can do value={...cats}.



Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.