How to setup a vue-cli with vuetify project to run with IE 11?
I'll do a partial answer.
1) @vue/app and babel presets are included in vue-cli.
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills
This is stated clearly in the vue-cli documentation. But it also specifies:
"If one of your dependencies need polyfills, you have a few options:
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js"
2) You still need to put the babel polyfill in each entry file.
Traditionally: import '@babel/polyfill'
in your main.ts.
What babel-preset-env does is that it detects your browserlist then replaces that line with whatever polyfills it deems necessary.
3) @babel/polyfill is deprecated. Who knew.
Some people need extra heavy duty polyfills. That's me. Because internet exploder in office-js + being too used to bleeding edge tech. That's where core-js @ 3 comes in.
My webpack build is fully custom for that purpose. But i ripped it out of the vue-cli and modified from there.
My babel loader config :
const BABEL_LOADER = {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-syntax-dynamic-import'],
presets: [
// '@vue/app',
['@babel/preset-env', {
targets: {
ie: '11',
browsers: 'last 2 versions',
},
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
}],
],
},
};
This is the top of my entry file:
import Vue from 'vue';
import App from './App.vue';
// ------------ Polyfill ------------
import 'core-js/stable';
The core-js replaces @babel/polyfill.
More reading on core-js: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md