VueJS not rendering in IE11

Question

I have a really large portion of our site written in VueJS. It was brought to my attention that it does not load in IE 11 (or Safari 9 and below). Unfortunately, IE 11, still accounts for 10% of traffic to the site.

After adding in polyfill and fixing some other errors in the developer console for IE11 the site still doesn't load. I see only a blank page. I set the compatibility mode to edge, nothing still. The console is clear of errors, only a few warnings. I am indeed running this through es2015 + babel-polyfill using gulp.

Has anyone dealt with this before? I am afraid I will have to start stripping down the application piece by piece until I isolate the code or element causing the problem. That could take days seeing as IE 11 gives me no debugging information.

Answer 1

The issue here was ES6 style JavaScript within the markup. Example:

<div class="tabs tab_select" data-group="tabs" data-ref="room" v-on:click="(event) => { toggleTab(event, property) }">

Needed to be:

<div class="tabs tab_select" data-group="tabs" data-ref="room" v-on:click="toggleTab(event, property)">

Answer 2

I found that my website was automatically running in compatibility mode as all sites on our intranet do.

What fixed the issue for me was using a meta tag setting the target to the version I needed (I needed to target a min of IE 10).

<meta http-equiv="X-UA-Compatible" content="IE=10" />