How to setup a vue-cli with vuetify project to run with IE 11?

Question

I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success?

I found many posts on the net that explain how it should be done but without success. I tried to combine in almost all the ways possible the setup explained below without success, endind with many different errors up to a blank page

The application runs fine wit Chrome or FF

If someone has such an application running in IE 11 it would be greatly appreciated

Context (all the latest versions):

vue-cli
typescript
vue.js + vue-router + vuex + vuex-persistedstate
vuetify + vue-i18n + vuelidate
axios

Pardon me if some question seems stupid as I'm quite a newbie on babel/webpack dev..

What I've tried and questions : (i've tried almost all the combinations the following)

Should I use npm install babel-polyfill --saveas explained in the vuetify setup for IE 11 here?
Should I addimport 'babel-polyfill'inmain.tsas explained in the vuetify setup for IE 11 here?
Or should I addimport '@babel/polyfill'inmain.tsas explained here
Should I use npm install @babel/preset-env --save-devas explained in the vuetify setup for IE 11 here or is it unnecessary due tovue-cli being used?

inbabel.config.js, should I replace the content initially created by vue-cli

presets: [
    '@vue/app'
  ]

by as explained here

presets: ['@babel/preset-env']

or (as seen in many places)?

presets: [['@vue/app', useBuiltIns: 'entry' }]]

or add the 2 presets?

presets: [
  ['@babel/preset-env'],
  ['@vue/app', useBuiltIns: 'entry' }]
]

Should I add some plugins like explained here?

presets: ['@vue/app'],
plugins: ['@babel/transform-modules-commonjs']

Or change it like this as explained in the vue doc here?

presets: [
  ['@vue/app', {
  polyfills: [
   'es6.promise',
   'es6.symbol'
  ]
  }]
 ]

invue.config.js, should I add?

transpileDependencies: [
  'vuetify',
  'vue-i18n',
  'vuelidate',
  'axios'
]

[SOLUTION 2019-06-25]
We finally got it to work, the answer from @blackening was very helpful It happened also that we had javsacript errors in IE 11 with google"reCaptcha"that disappeared after the following setup:

As a prerequisite,vue-cliis installed and the project is created by selecting`'Use Babel alongside TypeScript for auto-detected polyfills'

1) installcore-js@3

    npm install core-js@3

2) editmain.tslike this:

    import 'core-js/stable'
    import Vue from 'vue'
    import '@/plugins/vuetify'
    {...}

3) editbabel.config.js

    module.exports = {
      presets: [
        ['@vue/app', { useBuiltIns: 'entry' }]
      ]
    }

And that's it !
Now we are fighting with IE 11 CSS, but that's a know story... As a nexample, invue to apply a style only to IE, just code it like this

user_1152102 · Answer

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

user_4125273 · Answer

npm install --save core-js

Top two lines of main.js:

import "core-js/stable";
import "regenerator-runtime/runtime";

In vue.config.js:

 module.exports = {
    ...,
    transpileDependencies: ['vuetify']
 }

user_7062291 · Answer

According to this tutorial, after installing the vuetify using the following command:

npm install vuetify --save

Then, import the Vuetify in the main.ts file, like this:

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

After that, using this command to install babel-polyfill:

npm install --save babel-polyfill

Then, add the import at the top of the main.ts file, the final code as below:

import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Finally, using "npm run serve" command to run the application, it works well in IE 11.

How to setup a vue-cli with vuetify project to run with IE 11?

3 Answers