How to replace Vue.js with React in Laravel 5.4

Introduction

As you probably experienced, Laravel 5.4 comes with Vue.js bundled and bootstrapped. For some developers it is equivalent of Laravel being coupled with Vue.js in some way. Hopefully it’s not the case. Laravel is completely agnostic when it come to JS frameworks and you are free to choose whichever you prefer.

Keep in mind though that Laravel’s community somehow fell in love with Vue.js, what is indirectly proven by following facts.

The good news is Laravel 5.5 will use frontend presets, allowing to remove not only Vue.js, but also Bootstrap with ease. Angular lovers must still use my method – unfortunately no preset for them on the horizon.

Assumptions

  • npm is installed
  • php and composer are installed
  • laravel command is available

Solution

Bootstrap new Laravel project

Replace Vue.js with React in NPM configuration (/package.json)

Update Laravel mix configuration (/webpack.mix.js)

Clean up app.js file (/resources/assets/js/app.js)

Remove Example.vue file and create App.js (/resources/assets/js/components/App.js)

Update NPM package list and compile your assets

Create HTML element with app id and make sure app.js file is loaded (/resources/views/welcome.blade.php)

Enjoy React.

Summary

Wasn’t that scary, was it? In exactly the same fashion you can try to include other JavaScript frameworks, like Ember or Angular.

Everything should work fine, since Laravel Mix covers versatile configurations harvesting the goodness of Webpack module bundler.

In case you get stack, you have two choices. First is to create your own custom Webpack configuration. Second is to open an issue under Laravel Mix project and wait until Jeffrey fixes it.


If you enjoyed this post, then make sure you subscribe to my Newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *