Vue.js + Blockly

[Antonio Vivace]

Oh hey,

I'm trying to use Blockly in a Vue application.

Has anyone tried it and uses this combination? Any tip or example project on how I should handle the integration?

I started by injecting the toolbox and the workspace replacing the getElementById call but I see a lot of other problems, probably due to Vue not letting Blockly use getters and setters on variables. (everything is black, no strings or options, but drag and drop and rightclicking works).

I guess I should write a Wrapper component, and eventually handle event submissions with some interface functions (I'm following this: https://laravel-news.com/vue-wrapper-component, trying to apply the idea to my situation).

Any help or tip is really appreciated

[Daaron Dwyer]

Hi Antonio,

I'll be doing a vue-blockly integration soon, so I'm interested in this too. My initial reaction is to not try the wrapper, if it is failing you, and handle blockly separate from vue, only modeling the XML. If you solve the component issue, let me know. If I do, I'll post about it.

Cheers,

Daaron

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Antonio Vivace]

You don't actually need a wrapper, since the toolbox is not really in the DOM.

I have reached a working point. My work is for an open source project, you can see the source here: https://github.com/CoderBotOrg/vue-app

Best regards,

Antonio

[Daaron Dwyer]

I appreciate you sharing this Antonio. I'll take a look.