Home

So i’m trying to implemented outdated-browser

This requires 3 things

1. include their js and css which is not a problem via nuxt.config.js and cdnjs
2. add <div id="outdated"></div> somewhere, easy i can add this to layouts/default.vue
3. add the following javascript near the bottom of the body tag.

//event listener: DOM ready
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
//call plugin function after DOM ready
addLoadEvent(function(){
    outdatedBrowser({
        bgColor: '#f25648',
        color: '#ffffff',
        lowerThan: 'transform',
        languagePath: 'your_path/outdatedbrowser/lang/en.html'
    })
});

This has to be inline and not included or it won’t work properly. I’ve tried numerous times trying to inject it into layouts/defualt.vue through something like

  .container
    nuxt
    #outdated
    | {{{ '<script>/* eslint-disable */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function(){ console.log("test one two"); outdatedBrowser({ bgColor: "#f25648", color: "#ffffff", lowerThan: "filter", languagePath: "/en.html" }) }); /* es-lint enable */ </script>' }}}

But it unforutnately escapes the string: != "function" becomes != "function"

Is there any other proper way of doing this?