Picturefill in IE11 with Vue.js

Question

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

It works in other browsers, just not IE11 and probably older versions of it. Because it doesn't recognize the picture element. — user1081577, Feb 14 '17 at 10:33

score 1 · Accepted Answer · answered Jun 16 '17 at 07:45

1

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();
    }

answered Jun 16 '17 at 07:45

Harsh Aggarwal

182
1
7

Picturefill in IE11 with Vue.js

1 Answers1