Full-Stack Vue.js 2 and Laravel 5

Polyfills
The ES2015 proposal includes new syntax, but also new APIs, such as Promise,
and additions to existing APIs, such as Array and Object.
The Webpack Babel plugin can transpile ES2015 syntax, but new API methods
require polyfilling. A polyfill is a script that is run in the browser to cover an
API or API method that may be missing.
For example, Object.assign is a new API method that is not supported in Internet
Explorer 11. If we want to use it in our frontend app, we have to check at the top
of our script whether the API method exists, and if not, we define it manually
with a polyfill: if (typeof Object.assign != 'function') { // Polyfill to define
Object.assign }
Speaking of which, Object.assign is a handy way of merging objects and would be
useful in our frontend app. Let's use it in our code, then add a polyfill to ensure
the code will run in older browsers.
Look at the data object in our entry file, resources/assets/js/app.js. We are
manually assigning each property of the sample object to the data object, giving it
the same property name. To save having to repeat ourselves, we can instead use
Object.assign and simply merge the two objects. In practice, this doesn't do
anything different, it's just more succinct code.
resources/assets/js/app.js: data: Object.assign(sample, { headerImageStyle: {
'background-image': 'url(/images/header.jpg)' }, contracted: true, modalOpen:
false }),
To polyfill Object.assign we must install a new core-js dependency, which is a
library of polyfills for most new JavaScript APIs. We'll use some other core-js
polyfills later in the project: $ npm i --save-dev core-js
At the top of app.js, add this line to include the Object.assign polyfill: import
"core-js/fn/object/assign";