Automatic reload of Client after deploying in Vue.JS

I went through Henrik Pienar’s article on Automagic Reload of Client after deploy for Angular 4 and I was excited about what I read and wanted to write about how to do that in Vue.JS. Though he said it could be done in any frontend framework I decided to go the extra mile of trying it out in a project I was working on and here is how I did it.

For Vue.JS, using webpack for build purposes, the generated js file is usually in this format app.<hash_number>.js . So this is the file you would need to generate the current hash for checking.

This file is run after the build process so that we can have the newly generated file for copying out the new hash and checking it against the current hash number.

Your build command would be something like this:

So this is how we use it in our vue.js app

We would need to create a mixin that will be injected into the App.vue file.

Here is what it looks like:

And then the App.vue file would have a :key attribute that would force the root app to destroy the root component and refresh due to the change in the value of the key property in the root component.

Here is the App.vue example

I tried this and it worked for me. Feel free to leave comments and let me know if you have any issues while trying to implement it for your project.

N.B: This was tried on a project using vue-version: 2.5.2 it would also work in @vue/cli3.