Reference a template by id in a Vue components

Hi,
I’m trying to use Vue components with v-bind:is to display components with different templates.

Say I have the following code :

<div id="mainApp">
    <component v-bind:is=" 'first' "></component>
</div>

<template id="some-template"><p>Hello !</p></template>

<script>
var mainApp = new Vue({
            el: '#mainApp',
            components: {
                first: {template: "#some-template"}
            }
            );
</script> 

Why is this not working ? Referencing a template by its id in a component created outside the Vue instance works, why not here ?

If you’re using Vue directly within an HTML page, and not with a bundler (utilizing single file components) you should use script tags for your templates, and not “template” tags just as mentioned in the docs. This is called “X-Templates”

Check the fiddle below.

https://jsfiddle.net/4h0j2v7L/

and in the docs.

Thanks a lot for your reply, I thought the two tags were equivalent.

Hi @bolerodan and @Mavromatika, I see no problem with <template> and working fine.

https://jsfiddle.net/f4wr6g1j/

As best practice for HTML5, the tag template is better.

There’s a missing brace at the end of the script :