Vue Js & Puzzle editor

dsmooot wrote:

..and Hello, GlifTek! Glad you made it into the discussion. It seems you’ve found some answers fairly quickly as well! Always awesome to find helpful forums – especially getting to have a discussion with the lead dev! As Ivan suggested to you, I used the vue template from the Embeddable folder to setup the Vue project and then compared, migrated, and renamed my files from my static project into my Vue project. I linked my repo to github in a previous post, so feel free to clone it if it’s helpful to you. Pushed up the fix to my problem, so it should be functional as a template!

cool yeah!
i got mine working earlier.. but no puzzle icon link in the manager, so i tried yours and moving mine around to your arrangement.
now it’s not working at all.

i was moving files around then also saving them in VSC.
i’ll redo it tho.

i’m currently trying to learn Vue in general, and get some github user example components working.
working on trying to get this accordion image menu working now…
vue-accordion
demo – vue-accordion live demo

just having issues with which file i should be registering them in.. i’ll get it .. checking tuts now.

i’ll take a look at your newest version to get mine back to par.

yeah the devs here are just great.

speaking of which..Ivan,
do we NEED to do the CLI to get the bare bones of vue/v3d up and running?

IF SO, what initial installation settings do you reccommend?

ok i got it working now too!

changes i made with puzzles transferred over by simply copying only my
“app.gltf” and visual_logic.js files into the src/v3dApp folder of the Vue project.

To initially simplify things, I made a new Verge3D app called “app” because of the naming conventions used in the Vue project tutorial.

any renaming can be done from there. (or before hand if you know where all the file calls are in the project to change)

Ivan,
i might be missing something, but i think the instructions might need to change to have the folder that ends up being copied as the public/v3dApp folder should have it’s contents go to the scr/v3dApp folder to resolve the confusion about that.

then possibly add something to the App Manager where you can choose if you want to create a Vue app…

like…if the user has already done the CLI to create a project in the verge3D/applications folder, then app manager could have an option to recognize that, and ask if they want to make that vue project into a vue/verge3d project, thus eliminating all the extra steps in the tutorial through the install, then have vue projects always look for the visual_logic.xml files in their proper vue structure place.

also i don’t think the CLI project creation may be necessary for this if you want a bare bones vue project, (just have vue installed npm obviously).

…exciting!

Hi GlifTek. Good to hear you’ve been making progress with your project setup. I work as a front-end dev with a team that uses Vue for most of our projects, so being familiar with the framework was a big motivation for integrating verge3d into a Vue context. There certainly is a lot to learn within Vue, so it’s great to learn by trying things (and failing often) first-hand. As this thread can show, there are areas where I am still learning about the framework (I’m usually working out of projects that have been set up :P, so project build-related stuff is my weak point)… I went ahead and pushed up the change where I’m using UI elements via Puzzles, so you can have that as a reference. I’m planning to finish working through the tutorial series and will continue to update that repo, so feel free to check in for changes. I’m a fan of going through terminal commands, npm, vu-cli, etc. vs. the gui, but it’s all preference. … and to note, I think it’s great that we are some of the first case-studies for user inquiries related to Vue w/verge3d. I hope that in some way our faults and questions provide some meaningful insight for the verge3d devs along the way! Can’t wait to see formal vue-related tutorials for verge3d!

Right on, dsmoot.
Very good to know I’ve got a similar mind on this journey of discovery!

As I’m learning Vue to be my primary project framework because of its relative simplicity and organizational aspects, I’m ALSO looking into Quasar as a dev/deployment package. With our main project, I want to nip as much redundancy at the bud.

Quasar is based on Vue.js, and uses packages like Electron.js to deploy across all platforms simultaneously.

Ie: a smoother way to get your Verge3D protect out to a mobile app format. (Or desktop app if desired).

I’m currently learning VueX to get all useable data in one spot.

Do you have experience in Quasar or VueX? I will message you on Git.

Hi David,

Please take a look at this guide:
https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#Verge3D_Vue

Hi David,

David Duperron wrote:

I will try harder on my own, but if there is a quick help somewhere it’s always welcome!

There’s no direct integration between Vue.js and the Puzzles Editor, but you can try the approach described here: https://www.soft8soft.com/topic/vue-js-puzzle-editor/#post-27426

David Duperron wrote:

I have troubles loading the visual_logic.js resource file… I don’t know how to import, or declare or whatever in the .vue or template files to load it properly… I suspect I need to properly import the visual_logic.js resource inside the <script> section of the V3DApp.vue file (similarly to what is done with the app.js file), but I don’t know how…

For standard applications the visual_logic.js file is usually loaded automatically from your application’s main js file via a <script> tag.

But in the vue.js example it’s disabled by default, because the integration with puzzles is not supported out of the box. In order to enable it you need to open the app.js file and search for the line:

var LOAD_LOGIC_FILES = false;

and change it to:

var LOAD_LOGIC_FILES = true;

David Duperron wrote:

EDIT2: Ok I just found that there is no createApp function in the app.js file when using the puzzles version… I then called V3DApp; instead of V3DApp.createApp(); once mounted, and got rid of the error… But this is just to go one more step! Now the scene does not load. Must be something to do with path…?

How do you open the puzzles version of the app? I can only recommend the way I described here https://www.soft8soft.com/topic/vue-js-puzzle-editor/#post-27426 in the sections 1) and 2). It should work if you just open the scene’s .gltf file separately via the Application Manager, i.e. without loading the whole Vue.js application. Otherwise, there will most likely be crashes due to some path issues.