Detect new versions of app.js automatically

api.php

<?php

// Ugly as sin, but gets the latest version URL for the app.js file
// The Vue app will query this every 60 seconds
Route::get('/version', function(){
    $manifest = file_get_contents(public_path('mix-manifest.json'));
    $manifest = json_decode($manifest);
    return response()->json([
        'latest' => $manifest->{'/js/app.js'}
    ]);
})->name('api.version');

app.js

const app = new Vue({
    el: '#app',
    data: {
        loadedVersion: null,
        latestVersion: null
    },
    computed: {
      updateAvailable() {
          if (this.loadedVersion == null || this.latestVersion == null) return false;
          if (this.loadedVersion === this.latestVersion) return false;
          return true;
      }
    },
    methods: {
        checkForUpdates() {
            // Read directly from the DOM - this is written out on first page load and shouldn't change
            // unless you refresh
            this.loadedVersion = document.getElementById('app-version-check').getAttribute('src');

            // Fetch the exact URL of the latest app.js version from the server
            axios.get('/api/version').then(response => { this.latestVersion = response.data.latest; });
        }
    },
    mounted() {
        // Run this once per minute
        setInterval(this.checkForUpdates, 60000);
    }
});

layout.html

<!-- Tag the script element with an id attribute that your Vue app looks for -->
<script id="app-version-check" src="{{ mix('js/app.js') }}"></script>