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

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: https://github.com/vuejs/babel-plugin-transform-vue-jsx

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.

INSTALLATION

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.

CONCLUSION

Fig 1.0 — Before & After Comparison (source: https://github.com/chrisvfritz/vue-3-trends/blob/master/slides-2019-03-vueconfus.pdf)

BONUS TIPS

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:

• https://scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care
• https://github.com/vuejs/babel-plugin-transform-vue-jsx

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 (@agm1984) | Twitter