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

    <style scoped>
      /* Only for  IE 11, wrap div text */
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .ieMaxWidth90 {
          max-width: 90vw; /* 90% view width */
        }
      }
    </style>

Obese

Just fyi for completeness: i did not include es6 generator support. Supposedly you need to add import 'regenerator-runtime/runtime'; under the core-js import. – Groundsill

Answer 1

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

Groundsill

I dont understand why I nedd explicitely to add "core.js" to run vuetify+vue in IE11...This is said nowhere in the doc (vuetify, vue.js. vue-cli etc...) – Obese

@Obese You don't have to. This is a long argument, vue-cli uses babel-preset-env ("A default Vue CLI project uses @vue/babel-preset-app, which uses @babel/preset-env"), which uses babel-polyfill which is now deprecated in favor of core-js. (babeljs.io/docs/en/babel-polyfill). The older version still works, but if you want the newer cross browser features, then you need to update. – Groundsill

OK @blackening, I will give it a try. Thx – Obese

We made it to work based on your answer @blackening. I will edit my question to describe what exactly we did to have it working. Thx – Obese

This is the closest solution I've found after hours of scouring the web. I'm still trying to optimize for build size, as this seems to include the polyfills even for browsers that don't need them. Vue-cli-service build --modern doesn't really seem to do a thing in regards to this. – Deas

@CliffHelsel webpack does not determine which browser is used at runtime. Instead it does a worst case build. If you support ie11, it includes pretty much everything. Also, remember to disable the productionSourceMap. Not sure why its true by default. – Groundsill

Answer 2

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']
 }

Surrender

Answer 3

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.

Incision

This is against what is said in the link you provided (and also listed in my question BTW). In this link, it is clearly stated that "Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10. If you are using vue-cli-3, this is done automatically for you. Otherwise, in your project directory, you can install babel-polyfill". So npm install --save babel-polyfill should not be done or the doc is wrong. This confusion is the base of my question – Obese

And if you don't install explicitely babel-polyfill this way the "import" is "@babel/polyfill" and not "babel-polyfill"...So this add to the confusion because you propose to explicitely install babel-polyfill where the official doc says to not do so when vue-cli 3 is used.... – Obese