VueJs 3 + Vuetify: Not working in IE and Edge

Question

I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.

package.json

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

vue.config.js

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

main.ts

import 'core-js/es6';
import 'regenerator-runtime/runtime';

The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.

What am I missing here?

Answer 1

If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.

But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js@2 --save and added this to the rules in my webpack.config.js

{
    test: /\.js$/,
    exclude: /node_modules\\(?!(vuetify)).*/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                configFile: './babel.config.js',
            }
        }
    ]
}

Then I added the babel.config.js file to the root of the project.

module.exports = {
    presets: [
        ['@babel/preset-env', {
            debug: true,
            useBuiltIns: 'usage',
            corejs: { "version": 2, "proposals": true }
        }],
    ],
    plugins: [
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-spread',
    ]
}

A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.