thedevdojo/voyager

Seperate Vue from app.js

Open

#4983 opened on Jun 18, 2020

View on GitHub
 (0 comments) (2 reactions) (0 assignees)PHP (11,817 stars) (2,652 forks)batch import
featurehelp wanted

Description

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.

Contributor guide

Tech stack
phplaravelvuejavascript
Domain
frontendbuild systemdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Laravel MixVue.jsWebpack externals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by examining the current webpack.mix.js configuration in the Voyager package to locate where Vue is bundled into app.js. Implement the externals configuration for Vue as suggested in the issue, then modify the master.blade.php template to conditionally include Vue from CDN based on the application environment. Test both production and development modes to ensure Vue development warnings appear in dev. Consider the alternative of bundling Vue separately into a vue.js file instead of CDN if maintainers prefer that approach. Review any existing pull requests or comments for additional guidance.