Vuetify.js - IE11 not showing datatables with babel-polyfill - laravel

Question

I have installd babel-polyfill using package.json (npm) in a laravel environment.
I am using vuetify to generate tables. However, when opening the page rendering the table in IE11 the table shows up but all the columns are gone (all columns are merged into one single column) and I cannot interact with the datatable (I have row click events which work fine in Chrome, Firefox and Edge). Do I need any additional polyfill packages?
Package.json:
"devDependencies": {
...
"babel-polyfill": "^6.26.0",
...
}
app.js:
import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'
window.Vue = require('vue');
Vue.use(vueResource);
Vue.use(Vuetify);
Thanks for any help!
EDIT: Turns out it was a bug. It seems to have been fixed in version 1.5.5.

Answer 1

As stated by Zach there is barely support for E11. Polyfill support is there but CSS support is lacking.
If you look at the browser statistics only a small number of people is still using it.
You should drop support if you are able.
Using new technology with a very old program tends to cause problems.

Answer 2

For new projects (use Vue CLI v3)
npm install #vue/cli -g
vue create my-app
vue add vuetify
For existing application:
npm install vuetify --save
Update the main.js as follows:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
You may also want to add the default styles:
// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
OR
// main.styl
#import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader
IE 11 and Safari 9 Support:
npm install babel-polyfill --save
You must then update the main.js as follows:
// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()
If your project doesnt already include the Babel preset-env, then you should add it as follows:
npm install #babel/preset-env --save-dev
and update .babelrc
// .babelrc
{
"presets": ["#babel/preset-env"]
}
Important Step:
Vue Cli v3 doesnt automatically bring in IE11 supports, so you will have to manually configure it to do so by manually adding transpileDependencies parameter in vue.config.js
// vue.config.js
module.exports = {
transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
}
That's it, it should work. Enjoy :)
Result:

Answer 3

Probably you set customProperties to true in the Vuetify theme options. It uses css-vars which are not implemented in IE 11. Hence no colors are shown. Setting the customProperties to false fixed a similar issue for me.