Vue: IE11 Template Tag Issue

Created on 20 Jan 2016 · 7Comments · Source: vuejs/vue

I am getting the following error in IE11 when using the template tag:

[Vue warn]: Unknown custom element: <template> - did you register the component correctly?

In FireFox, I do not have an issue when using the template tag for my templates. In IE11, the issue goes away if I replace the template tag with <script type="text/template">.

need repro

Source

tpck

Most helpful comment

Ok, so here's the things to note:

Avoid compiling your "raw templates" - that means do not mount the root instance on <body>, or put your "templates" in <head> instead.
Use <script type="x/templates"> if you want cross-browser compatibility.

yyx990803 on 20 Jan 2016

👍13

All 7 comments

<template> is not natively supported in all browsers. Also please provide a repro of how you are using it. If you are using the <template> as an inline template then you should not be compiling it.

yyx990803 on 20 Jan 2016

I looked around for <template> compatibility and it looks like IE11 does not recognize it (even though FireFox and Chrome support it in older versions).

Here's an example:

<user hello="Hello User"></user>

<template id="user-template">
    <button @click="sayHello">Say Hello!</button>
</template>

<script type="text/javascript">
    var componentUser = {
        template: '#user-template',
        props: ['hello'],
        methods: {
            sayHello: function() {
                console.log( this.hello );
            }
        }
    };

    new Vue({
        el: 'body',
        components: {
            'user': componentUser
        }
    });
</script>

tpck on 20 Jan 2016

Ok, so here's the things to note:

Avoid compiling your "raw templates" - that means do not mount the root instance on <body>, or put your "templates" in <head> instead.
Use <script type="x/templates"> if you want cross-browser compatibility.

yyx990803 on 20 Jan 2016

👍13

I would add my two cents:

For IE11 you have to hide template tag with display none + polyfill that doesnt hide the template tag
IE11 counts elements in template (so if you render template that is inlined in html document you will end up with rendered elements number + the number of the source template element)

englishextra on 21 Oct 2017

@englishextra Could you elaborate on this? Maybe with an example?

jlmmns on 12 Mar 2018

@jlmmns this will work fine with IE11

        <style>
            template {
                display: none;
            }
        </style>
        <script>
            (function(){return (function templatePolyfill(){"use strict";if("content"in document.createElement("template")){return false;}var templates=document.getElementsByTagName("template");var plateLen=templates.length;for(var x=0;x<plateLen;++x){var template=templates[x];var content=template.childNodes;var fragment=document.createDocumentFragment();while(content[0]){fragment.appendChild(content[0]);}template.content=fragment;}}());}());
        </script>
</head>
<body>
        <template id="template_aside">
            ...
        </template>

englishextra on 12 Mar 2018

👍12 👎2

@englishextra Thank you!!!