IE11 Browser Support (Laravel Mix, Vuetify, vuetify-loader, Vuejs)

[ericsssan]

I just want to share my solution in case someone else is having difficulty making it works on IE11.
This is how i made it works.

You need 3 extensions for laravel mix.
npm i laravel-mix-polyfill
npm i vuetifyjs-mix-extension
npm i laravel-mix-transpile-node-modules

And 2 polyfill that are not provided by core-js
npm i custom-event-polyfill
npm i proxy-polyfill

webpack.mix.js

const mix = require('laravel-mix');
require('vuetifyjs-mix-extension');
require('laravel-mix-polyfill');
require('laravel-mix-transpile-node-modules');

mix.js('resources/js/app.js', 'public/js')
   .vuetify('vuetify-loader') // vuetify-loader will be installed automatically by laravel mix. (I think)
   .extract()
   .version()
   .transpileNodeModules(['vuetify', '@inertiajs']) // <-- transpile *.js in node_modules folder. 
   .polyfill({
      enabled: true,
      useBuiltIns: "entry", //<-- i use 'entry' because 'usage' gives a lot of warning. 
      entryPoints: "stable",
      targets: false //<-- i want to polyfill everything. If you only want IE11 then change to ['ie':'11']. Check doc for details.
   })
;

app.js

import 'core-js/stable'; //<-- because i use 'entry' option above.
import 'regenerator-runtime/runtime'; //<-- same shit.
import 'custom-event-polyfill'; //<-- inertia requires this.
import 'proxy-polyfill/proxy.min.js'; //<-- inertia requires this.
import { App, plugin } from '@inertiajs/inertia-vue';
import Vue from 'vue';
import { InertiaProgress } from '@inertiajs/progress';
import Layout from './components/Layout.vue'; //<-- make your own Layout component. or get from inertia doc.
import vuetify from './vuetify.js'; //<-- check vuetify installation docs.

Vue.use(plugin);

InertiaProgress.init();

const el = document.getElementById('app');

new Vue({
    vuetify,
    render: h => h(App, {
        props: {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => import(`./pages/${name}`).then(({default: page}) => {
                page.layout = page.layout === undefined ? Layout : page.layout;
                return page;
            }),
        },
    }),
}).$mount(el);

Happy New Year and bye 2020.

[claudiodekker]

Hi @ericsssan,

Amazing to see you still got Inertia to work on IE11, I hope it remains functional as we change things and add features!

---

Just in case somebody is curious as to why we've dropped IE11:

• Only 1.10% of the internet still uses IE11.
• Official mainstream support ends in just over 7 months from now.
• IE11 has already more or less been proclaimed dead by Microsoft themselves in multiple of their own apps, including Github itself.
• Because Inertia is fairly young, we believe that apps built with it are primarily built by and for people that target more modern browsers / the general population, whereas the majority of this 1.10% of IE11 users is likely to consist of big corporate environments such as banks where using a different browser just isn't an option due to limits on the IT infrastructure and/or dependency on mission-critical applications that only work in IE.
• The only way for us to use certain modern features in Inertia would be to add polyfills to Inertia, which, given the above, we felt wasn't warranted considering the size increase and maintenance overhead that it would add.