Vue.js and Web Components

Hey there

I’ve been trying to to get vue.js running with a custom Element (Web Component) and I cant seem to get it running. I tried to hand it a { el: ‘template’, data: { test:" test"}} but it did not work (no errors).

Where as the template consists of

         <template>
         <h1> {{ test }}</h1>
          </template>

While the template can be resolved by vue the problem is that template is no ordinary HTML element and doesn’t have the H1 as direct child. It has however a document fragment as an attribute which itself has the children in it. Passing vue this fragment didnt work either unfortunately. A document fragment is obviously not the same as full blown element so could that be the issue?

Thank you! Alessandro

[kristianmandrup]

How can I package a Vue component as a web component? Couldn’t find any examples of that so far… Oh, I see the gist you provided shows how. Would be nice if this recipe was more accessible via official docs or real life examples. Cheers!

[yyx990803]

The catch here is template is used to created a cached DocumentFragment for reuse, while el is the actual element that Vue will use to render stuff. On the other hand, <template> tags cannot be used as a render node (because browsers won’t render it at all, it only parses its content as a DocumentFragment). You need both template and el options for it to work.

Working example: http://jsfiddle.net/fNY6J/