Integrating Vue.js

Has anyone successfully used Vue with Playcanvas.
I’m looking at this example - which seems spectacular to me

I’ve tried making a test project and the DOM seems to be there.
But not sure how to get it to work properly…

Any ideas ?

You haven’t added the formatting for the container class in the css. https://playcanvas.com/editor/code/506575?tabs=9227620

The position attribute is the most important (not 100% sure why though).

If you want to use Vue / React / Angular or other frameworks, I will recommend you to use [playcanvas engine] (https://github.com/playcanvas/engine).

But it means you can not use the online editor, you should build everything by yourself

@yaustar - thanks - so simple. Example updated.

@scarlex - I have been using the UI examples from the tutorials. They use CSS and HTML.
They work well - but the editor is not used to layout these UIs. You need to use a regular browser to get everything the way you need it. But it is just plain css and html.

I am experimenting with Vue - which seems to integrate with PlayCanvas much better than the others you mention. I think its better because its still just css and html. (React and Angular have steep learning curves in an html variant templating language).
The fact that Vue reflects the underlying data structure is very nice indeed when used with Playcanvas. It means I have to do much less work than when using css and html as used in the tutorials.

E.g. the example above - which looks at the simple json structure and reflects its state in the UI. Changing the internal structure auto-updates the UI and actions performed in the UI auto-update the structure.

This makes my code much less complex to write, read, and understand. In fact I think its so good it might be worth considering making tutorials that use it for UI directly. I certainly did not appreciate Vue’s design before embarking on this experiment.

This code is an example of a draggable resortable list with css styling - driven from the json structure

1 Like

I know what you mean now. :smile:
Just now I though you want to create your own playcanvas app by vue.