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

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
$npm install --save-dev @babel/plugin-syntax-jsx @vue/babel-plugin-transform-vue-jsx @vue/babel-helper-vue-jsx-merge-props
{
"plugins": ["@vue/babel-plugin-transform-vue-jsx"]
}

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:

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

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.