[SOLVED] Picturefill in IE11 with Vue.js

Picturefill in IE11 with Vue.js

In IE11 the Picturefill library doesn't work with Vue.js. I get the following warning:

[Vue warn]: Unknown custom element: <picture> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I can remove the warning by using Vue.config.ignoredElements = ['picture'] but that doesn't seem to fix the issue. I think under the hood Vue.js is doing things with the picture tag because it doesn't get recognized by IE11 and therefor Vue.js thinks its a custom tag?

Please let me know how to fix this problem! Thanks

Solution

For IE11, You have to make a picturefill function call after picture tags are loaded in DOM. It will dynamically add the src attribute to img tag.

//For IE 11 Fix
    if(typeof picturefill === "function") {
      picturefill();
    }