Vue.js with Bubble? Is this possible?

I’d really like to use Ganttastic (Vue-Ganttastic | Vue-Ganttastic (zunnzunn.github.io)) in Bubble due to the draggable bars feature. I’m thinking about creating my first plugin but I’m not finding any instructions on how to integrate this type of project within Bubble. I’m also not highly skilled in JavaScript but that never stopped me from jumping in with both feet.

For example, how do I do a npm install in the Bubble world? I looked at @nocoleb’s Gantt plugin using the IBM repository but I’m still left with many questions. Any guidance?

1 Like

Just build in weweb. It’s based in vue already

But yes. You can embed vue in bubble.

1 Like

You can’t, crazy right?! :exploding_head: not for frontend stuff anyway. You need to use script tags.

no npm install on client side plugins. You can develop it outside, bundle the files and then paste it in the editor (or any other solution that automates the boring parts).

Another alternative is to load the libraries from a cdn with a script tag in the header section of the plugin. As a starter you can follow Quick Start | Vue.js and passinstance.canvas to the mount call (remember to specify that the plugin does not use jquery)

1 Like

I believe Gantt charts are more about client-side libraries, so you have quite a few options.

Focus on JavaScript. Anyway, VueJS is JavaScript but wrapped into components for reactivity.

Look for how to make it in JS, like here: FusionCharts Blog - 5 Ways to Build Gantt Charts in JavaScript.

Also, look for alternative libraries in JS, such as Frappe Gantt on GitHub.

1 Like