Render vueJS components

[maelp]

Very cool! Would it be easy to have a kind of lib using Dropflow which would generate a PNG from a vueJS component and props? This could be useful when we want to generate views as PNG (for instance to send them on Discord)

(and would this also allow to render SVG elements in the component?)

[chearon]

I've done some VueJS server-side and this is definitely possible! Vue can already target non-browser APIs, so there shouldn't be any big problems trying that.

I'm also interested in ways to make this useful for the Discord community. We get a lot of people doing that in Automattic/node-canvas.

[maelp]

Yes! I'm using node-canvas, but right now just rendering simple SVG

Sometimes I develop more complex VueJS widgets with subcomponents, etc, which themselves could include SVG or canvas items, and it'd be nice if I could have them render directly to a PNG / SVG, so I wouldn't have to maintain a second "static" version which is only a Canvas/SVG using node-canvas when I want to show the data on Discord as an image, but I could directly do something on my server like

const doc = renderComponentInWindow(height=200, width=600, component=MyVueJSComponent, props=myProps);
const png = doc.render("png")

or something

of course I guess there would still be issues, eg if the component itself does some async loading, and we should wait for some state to complete, but as a first approach it would be really nice

what would it take to do something like this with your lib?

[CMiksche]

I think instead of specifically implementing support for Vue components, Web Components should be implemented instead first.

If now Vue.js support gets implemented, then the next people will come for Svelte, React, Angular and so on. Web Components however are supported by all major frameworks and are a Standard - so if support for Web Components gets implemented, all of these frameworks would already work if they are correctly configured.