Description of problem

Currently, Vue.js is compiled together with everything into app.js. However, when one wants to create a new page with Vue and extending the voyager::master blade, then one is forced to work with the production version of Vue, and you miss useful console warnings from Vue development version.

Proposed solution

Seperate Vue.js from app.js. This can be done very easily with webpack:

  mix.webpackConfig({
     externals: {  
      vue: 'Vue'
    }
   });

Then I would recommend to include Vue.js throgh CDN like this:

  @if (app()->environment() === 'production')
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" defer></script>
  @else
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
  @endif

Alternatives considered

Do the same webpack config, but instead of using CDN, compile Vue.js with webpack into /publishable/assest/js/vue.js. This has the downsite, that again the developer version will only be used if the asset is compiled within the package. However, at least other users could copy master.blade into /resources/views/vendor/voyager/master.blade and customize the vue.js dependecy by themself.

Additional Context

Seperating Vue.js from app.js has also the benefit that users can keep Vue.js in cache, even if app.js is modified.