mix.extract() (without arguments) splits the usual app.js into three files
- Application Code: app.js
- Vendor Libraries: vendor.js
- Manifest (webpack Runtime): manifest.js
So you'd have to include the other scripts in your Blade view as well for Vue to load
<!-- Scripts -->
<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>
The order is somewhat important because the Vue instance is created and mounted in app.js while the library itself is in vendor.js and the manifest.js is the webpack runtime
From the docs
If you don't provide an array of npm libraries to the extract method, Mix will extract all imported libraries from the node_modules directory. This is a useful default and is likely what you want. However, if you need to be explicit, pass an array and only those vendor libraries will be extracted.
What's That Manifest File?
Webpack compiles with a small bit of run-time code, to assist with its job.
When not using mix.extract(), this code is invisible to you and lives inside your bundle file.
However, if we want to split our code and allow for long-term caching, that runtime code needs to live somewhere.
As such, mix will extract it to its own file as well. This way, both your vendor and manifest files can be cached as long as possible.
