Buidling HTML interfaces with Vue.js

Hi sazzrro,

The manual section you are referring to is just about how to use the puzzles editor to add the visual logic script to your vue/verge3d app.

So, the “My Awesome App” entry in the App Manager’s interface is only useful for launching the puzzles editor and that’s it. It’s basically a dummy app and the App Manager can’t see the contents of the actual vue/verg3d project files like html, blend, etc…

sazzrro wrote:

I’ve followed the steps for connecting verge3d with Vue: Resource

But now I’m not sure how I can use my vue project to add HTML/CSS to my verge3d app.

If you created a vue application by following this tutorial: https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#Verge3D_Vue
then you should have a vue project that uses a verge3d app as a vue component. Specifically the component is located inside the vue app by the path src/components/V3DApp.vue. You can change its HTML and CSS as well as add more vue components the way it’s usually done in vue projects.

sazzrro wrote:

Also, how do I add in a blend file once I’ve connected verge3d with Vue?

Blend files by default should be located in the public/v3dApp/ directory inside your vue project, so you can place additional blend-files there as well (and not in “My Awesome App” since that’s just a dummy app for the puzzles editor), but they won’t be visible in the App Manager’s UI.

sazzrro wrote:

Is the purpose of connecting Vue to a Verge3d app specifically to do things with the puzzle editor? Are there other reasons for connecting with vue such as adding HTML interfaces, or is the only way to add HTML interfaces to add a separate .html file in the application folder of the app?

You are right that it’s only for the puzzles editor and there’s no other reasons for doing that. But to add HTML interfaces you can just work with vue components instead of using separate html files.

sazzrro wrote:

Would it be as easy as copying over a .blend file and visual_logic.js/xml from another project made purely through app manager into my public/vd3App folder?

Yes, but you also need to open the src/components/V3DApp.vue file inside your vue project, then search for the line this.sceneURL = 'v3dApp/app.gltf'; and change it to the actual name of the gltf file you copied over there. I guess it should be this.sceneURL = 'v3dApp/Taos3D.gltf'; in your case.