Laravel Mix + Vuejs Hot Module Replacement (HMR)

Sam Ngu
Sam Ngu
Mar 16 · 2 min read
Photo by Jonathan Niederhoffer on Unsplash

When I first started app development with Vue and Laravel, I was using “watch-poll” all the time. As my app grew larger and became more complicated, I knew I needed something more convenient and powerful.

Then I found this magical tool called hot reloading that elegantly solved my dilemma. However, I struggled to find any online tutorial on how to make both Laravel Mix and Vue hot reloading work together in my Laravel homestead box. So I thought I would share my solution here in this article.

Hot Module Replacement ( or Hot Reloading)

Vue’s built-in Hot Module Replacement (HMR) is awesome! It allows real time update in the browser. Unlike “watch” or “watch-poll”, which I found them to be inefficient in front-end development, HMR doesn’t require you to refresh the browser to see the code changes. On top of that, it preserves the states before the changes. How cool is that !!!

A Perfect Match: Laravel Mix + Vuejs HMR

It is actually very simple to setup:

2. Add host machine IP and site name in /etc/hosts of VM

3. Add this <script src=”{{ mix(‘js/your-main-app-js-file.js’) }}”></script> to to your Laravel blade files.

4. Run yarn hot or npm run hot at project root and enjoy!

NOTE: if you would like to use https for the hot reload server, add the https option as followed in the “hot” script in package.json

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --key /path/to/cert.key --cert /path/to/cert.crt --config=node_modules/laravel-mix/setup/webpack.config.js",

Let me know if you have any questions in the comments below.

Troubleshooting

Additional Resources

https://webpack.js.org/configuration/dev-server/ — Official webpack dev server documentation.

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/hot-module-replacement.md — Laravel Mix documentation