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

INSTALLATION

$ 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

--

--

--

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.

More from Medium

How to create dynamic multiple instances of Filepond file upload library.

Adding Social Logins to Your Laravel Apps: Twitter and GitHub

How To Create a Booking.com Scraper With Goutte And Laravel

SPA Authentication using Laravel Sanctum and Vue.js