Rendering Vue syntax within a Backbone View


#1

Hello,

I am trying to combine Backbone and Vue.JS.

var wrapper = wrap.render();
var vue = new Vue({
  render: h => h("div", () => {
    return h(wrapper);
  })
});
vue.$mount();
body.append(vue.$el);

That’s what I’ve got so far.

The wrap.render() calls the backbone render function which returns a HTMLElement. Then I try to mount the vue instance and render the backbone component (the wrapper) as child component.

Although the backbone view is rendered correctly, the Vue view does not seem to be rendered. Inside the wrapper element I have a child element which contains a simple line, which is not rendered.

<div>
  {{new Date()}}
</div>

The result is
image

I have also tried replacing that div with a Vue.component without success.

Do you have any hint, in which direction I have to look to render those child components?