IE10 - blank pages with Laravel5 and vue2

Have you searched the vue site for things related to IE10?

yes i did... i searched for about 2 weeks now. Cant get it working. for now I made a small window.alert that this site is currently not supported. But this is a short term solution... :/

Turn on vue debug mode. Vue is not returning any errors in the console.

Vue.config.silent = false;

see https://vuejs.org/v2/api/#silent

You probably use some fancy javascript that is not supported on IE10. See also this topic https://laracasts.com/discuss/channels/vue/vue-2-and-laravel-53-blank-page

I thought this is gone ... https://vuejs.org/v2/guide/migration.html#Vue-config-debug-removed

Vue doesnt give me any error, even in IE Console, there are no errors or Syntax errors. When i Load the Page I see everything, but as soon all scripts are loaded, it removes anything... the complete DOM is gone.

actually not, i am not using anything special. swiper and buefy are the only plugins i use.

Or am i wrong, are these "fancy" js components?

@uhorn see the documentation https://vuejs.org/v2/api/#silent. Not sure though if this also suppresses all errors.

Suppress all Vue logs and warnings

with fancy I mean new javascript syntax which is simply not supported in IE10.

Have you search stackoverflow, an example article: https://stackoverflow.com/questions/46733830/vuejs-internet-explorer-compatibility-issues-versions-10-and-11

i´ve read this... and so i got rid of all the ie console errors like promises and undefind stuff. But since i got got rid of all errors in the console, the only thing i see is blank page.

this is so weired, when i inspect the dom with ie after loading the page, everything is gone. My body element has the ID which is the reference to my vue ... like:

var app = new Vue({ el: '#web', });

so the whole body with the ID 'web' is gone.

nope sorry my mistake, vue is not mounted to body. I´ve checked it.

That is not weird, that is because VueJs is throwing an error. And VueJS is bound to #web

Does this site work on your local environment on IE10? Can you try to set Vue.config.silent = true and see if it gives you any errors in you console?

Is Internet Explorer in compatibility mode if it is try taking off compatibility mode to see if there's any changes. Or vice versa.

Which error? Im on a mac and have running virtualbox with windows on it to check the website. when i open, inspect element, there are no errors.

i have set Vue.config.silent to true, but still no errors.

@jlrdw ... i´ve tested it. no changes. IE Devtools in the DOM Explorer, there is no element with this given ID #web. When i instead check Debugger it show up.

Do you use something like mix or elixir to compile your assets? Can you try compiling them without a production flag to see if that somehow blocks the errors.

@m-rk ... i use elixir and just tried what u said. Still no errors, just the note that i am running in dev mode now. And some notes the svg tags cannot be selfclosing tags. but these are warnings, not errors ...i thought.

Later @ejdelmonico will probably be on the forum. He is pretty darn good with vue. Maybe later start a new thread.

Strange. From here I can't think of a one stop solution. I would recommend just the default debugging method. Stripping down.

• Disable/Remove everything from vuejs, see if it is still an issue
• Disable/Remove all vuejs components so you only have:

var app = new Vue({
  el: '#web',
})

• And with every step add some of your own code back. And see where it breaks.

Try to figure out where it goes wrong. I suppose it has something todo with ES6 syntax but I would expect something in your console in that case.

@ejdelmonico well i´m located in germany...time to go to bed soon :) But thx...i´ll try. I´ve searched for a solution for about two or three weeks now, so no super urgent need to do it right now.

@m-rk i´ll do. well before i had syntax errors, i at least could see the page. After using babel for es2015, and removing all other ie related console errors, i get the blank page.

@uhorn I am in the US Pacific time zone ( about 9 hours behind you). First thing to check if only happens in IE is that trusted sites is not blocking Vue scripts when it tries to update the DOM. That would explain why you may see DOM nodes and then...gone.

You may also need to reconstruct your <head> and use this exact order to force IE to use edge engine.

<title>Site Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">

OR in php

header("X-UA-Compatible: IE=Edge");

@ejdelmonico as you mentioned, i checked trusted sites nothing changed, but now i got to this point where edge under windows is showing the page as expected, IE 11 and below is showing blank pages still...

But thanks for your reply, i appreciate every help i can get.

@uhorn Try sending that header because it is to try and force IE to use Edge instead of Trident. Make sure you clear your caches before trying it out.

The other issue it may be that Trident does not support promises so you would need a polyfill.

https://github.com/stefanpenner/es6-promise

Then in you add this code so it loads first or you can use a cdn and call it conditionally:

Import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

@ejdelmonico thx, i´ve tried it. installed es6promise, but no change.

My root js file ... this is the very top of the file:

require('es6-promise').polyfill();
require('./dashboard/dashboard.js');
require('./bootstrap');

my blade main layout header:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

do i do something wrong, do i miss something?

as i mentioned, edge is somehow working. but ie11 still gives me a blank page.

Your meta tags look correct to force IE11 to use Edge but it is not doing so for some reason. The polyfill takes care of the fact that IE10 does not support promises. It must be that because IE11 is not using Edge, the template tag is unrecognized and you end up with an empty dom.

https://github.com/h5bp/html5-boilerplate/blob/6.0.1/dist/doc/html.md

https://forum.vuejs.org/t/ie-11-still-not-working/11834/2

Also, the polyfill must be loaded first so I would use an es6 import and call it right before you create the main vue instance. Try using the babel polyfill.

https://babeljs.io/docs/usage/polyfill/

@uhorn On a side note, why support IE10 and below. It is already at end of life. Here is an older article but it explains the reasoning why most shops don't support those browser versions.

https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/

https://cl.ly/quRu

Our companies are still hanging somewhere in the 90s when it comes to digitization and intranets :P So you can expect pretty much everything, unfortunately.

but:

Edge and IE11 are both totally fine, except the annoying popup telling me to use another Browser :P

IE10 compatibility mode breaks, but that was expected: https://gyazo.com/0b71cb4ef19f15294f01eb24964144b4

so if your IE11 doesn't work, there may be something wrong with your development settings, so you force a specific Version or something like that.