Search code examples
vue.jsvuex

How do I configure polyfill to get vuex to work with IE11 for plain javascript app?


I don't know how to transpile with TypeScript just yet. I am trying to build a basic Vue application and it is not running in IE11.

Vue.use(VeeValidate);

var vm = new Vue({
    el: "#app",
    store,
    data: { 
        error: "",
        isBusy: false
    }
})

So I understand I need a polyfill. I have added some CDN hosted scripts for that before the Vue and Vuex script tags.

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise-polyfill%2CPromise.prototype.finally-polyfill%2CObject.assign-polyfill%2CObject.defineProperty-polyfill%2CObject.entries-polyfill%2CObject.freeze-polyfill%2CObject.create-polyfill%2CObject.defineProperties-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
    </script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vee-validate.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="/js/dataStore.js?v=TOzjuYw4pqmi52KBE0sWgA-lGc7kdqLMFfR7X8q544A"></script>
<script src="/js/main.js?v=GnJcxmw4JPycX0K_Vvb6HLjM5dg_3qX3YpFa11fb4ps"></script>

The above Vue app is in main.js. IE doesn't like the store property.

What do I need to do to apply the polyfill and make this Vue app compatible with IE 11?


Solution

  • object_literal_extensions is not supported by ie11:

    var vm = new Vue({
        el: "#app",
        store,
        data: { 
        error: "",
        isBusy: false
    }
    

    it has to be:

    var vm = new Vue({
        el: "#app",
        store: store,
        data: { 
        error: "",
        isBusy: false
    }