Allow Vue to output to targets other than the html/page DOM

[remcohuijser]

I have been working with Vue and must say it is a real pleasure to work with after the other frameworks we have worked with.

As a startup we offer a solution for manufacturers and retailers to showcase product in 3D right inside product pages. I don't think it is really appropriate to promote any of our customers here so here is a small demo http://teaser.binki.es/demo/index.html?content=g7x and some shots:

Now Vue would be an excellent solution for doing any kind of html based UI in our player, but what would be really useful is the ability to use Vue for interfaces on our 3D content.

The basic idea is inspired on the work done by the people at Flipboard with their React Canvas implementation (found here: https://github.com/Flipboard/react-canvas). What they basically do is implement a system with a custom DOM that can draw content to a canvas. They use elements like , , , etc for this. For the creation of the virtual DOM they use React which they updates changes to their own interface system.

With Vue 2.0 and the inclusion of a virtual DOM I think it might actually be feasible to achieve this with Vue as well. The main thing that would be needed is the ability to provide custom rendering and events functionality that instead of updating the html DOM updates the DOM of the interface framework. This interface framework can then take care of (re)rendering itself to for example a canvas or directly to a webGL texture.

I am not intimately familiar with the codebase but I believe the current implementation is tightly coupled to outputting the result to the page DOM. Are there any plans to make an abstraction for this part of the view model or is this something to consider for 2.0?

If appreciated we can participate in the development of this feature.

[yyx990803]

This is indeed possible already in 2.0, but needs proper documentation on the inner architecture of the framework. Unfortunately this is currently not a high-priority focus, but we will eventually do it once 2.0 is officially out.

[remcohuijser]

Thanks Evan,

Looking forward to this 👍
It is good to know that we will eventually be able to do this: it makes my case really strong to adopt Vue in our organization.

Regards and best of luck working towards the 2.0 release!

[remcohuijser]

First of all congratulations on releasing 2.0 of Vue.

We have been evaluating Vue the last few months, especially how it works together with Haxe. By using some nice macro's we have been able to really get the best of both worlds.

As for this issue I think it boils down to changing the way that the Virtual DOM is translated into our own interface DOM. Looking at the code I think we need to overwrite the functions of the nodeOps object (createElement, appendChild, etc).

What do you think is the best way to do this?

Really appreciate if you could take a look at this. I understand you are really busy at the moment, so just a few quick pointers should be enough for us 😄

[yyx990803]

@remcohuijser I'd probably create a fork and add a directory under platforms alongside web. And you can model your platform implementation after how web is done.

[remcohuijser]

That sounds like a good plan. The tricky thing is that I want to use both the html DOM (for 2D interfaces) alongside our own interface DOM (for 3D interfaces).

I feel it makes sense to be able to pass a NodeHandler (or something) when creating a new Vue instance. This handler offers the createElement function etc that manipulates the DOM. By creating your own handler, the DOM manipulation can be changed.

// Data to be shared by both the 2D and 3D interface.
var data;

// Create 2D vueinstance and mount it on an html element.
var vue2D = new Vue({data: data, el: htmlElement, nodeHandler: new htmlHandler()});
var vue2D = new Vue({data: data, el: htmlElement}); // create html handler by default?

// Create 3D vue instance and mount it on one of our own elements.
var vue3D = new Vue({data: data, el: ourElement, nodeHandler: new ourOwnHandler()});

What do you think?