CODEWITHSUNDEEP
vuejs2internet-explorer-11
cnizzardini
cnizzardini

Reputation: 1240

VueJS not rendering in IE11

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.

Upvotes: 7

Views: 4028

Answers (3)

TrueEddie
TrueEddie

Reputation: 2233

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" />

Upvotes: 1

cnizzardini
cnizzardini

Reputation: 1240

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)">

Upvotes: 4

Georgi Ivanov
Georgi Ivanov

Reputation: 21

Put that on your index.html 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>

Upvotes: -2

Related Questions