Vue Hot Reload with Laravel Mix

When you are using Vue with laravel you have to do a refresh to see changes live – after changing a Vue component or a javascript file. Those refreshes add up over time and before you notice, eats up a large part of your development time, not to mention that the process itself is monotonous and tedious.

Hot module replacement is a handy feature/tool that removes all manual refreshes and makes your life as a UI developer a bit easier. Implementing hot module replacement with laravel/vue takes only a few steps.

Link to your compiled assets ( js/css) with “mix“

Laravel javascript files are typically located at public/js folder

So if you are using either one of the following in your script tag

<script src="http://localhost/laravel/public/js/app.js"></script>
//OR
<script src="{{ url('js/app.js') }}"></script> 

Then replace that with

<script src="{{ mix('js/app.js') }}"></script>

Make sure you have “hot” script available under “scripts” section in package.json

It looks something like this:

"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot"

Note that it may look different for your app. For example i have the following in my package.json

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

Add the following code to webpack.mix.js

mix.options({
    hmrOptions: {
        host: 'mysite.test',  // mysite.test is my local domain used for testing
        port: 8080,
    }
 });

Now navigate to your application root and run –

npm run hot

Change any Vue component for testing, it should change reflect the changes without reloading/refreshing the browser.