Overview
Previously, I created a repository combining Babylon.js and Nuxt 3.
Meanwhile, a tutorial for using Vue with Babylon.js has been published at the following link.
https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue
This time, I implemented the following tutorial from the above site using Nuxt 3.
The demo site is as follows.
https://nakamura196.github.io/nuxt3-babylonjs/
The source code is as follows.
https://github.com/nakamura196/nuxt3-babylonjs
Tutorial
Passing data from BabylonJS to Vue using callbacks
This is the most verbose, but the safest, most extensible, and most reusable approach. Basically, you create methods in the BabylonJS scene code and export them accordingly, allowing you to import them in Vue components and call each one.
https://nakamura196.github.io/nuxt3-babylonjs/third/
Passing data from BabylonJS to Vue using an exposed Engine object
The big change here is that the createScene method returns the Engine and Scene objects, exposing them to the Vue component so the component can access them directly. These two objects are stored in the Vue component for later access. Immediately after, an interval is created that sends the FPS value to the parent App.vue component every second. It pulls the FPS value directly from the BabylonJS Engine object into the Vue component.
Sending data from Vue to BabylonJS with loose coupling and without exposing the BabylonJS objects to Vue
As already written, you simply create methods for everything you need to access or manipulate. (…) You modify the BabylonJS scene file and export these methods so they can be imported in Vue components.
https://nakamura196.github.io/nuxt3-babylonjs/4/
Sending data from Vue to BabylonJS and vice versa with an exposed BabylonJS Vector3 object
This example introduces communication using exposed BabylonJS objects. In the last method, we expose the Engine and Scene objects. You can expose very few things. For example, exposing just a Vector3 is a much better approach than exposing the entire Scene.
In this scenario, we retrieve the required Vector3 objects from the BabylonJS scene via method calls. We use getPosition and getRotation methods. These Vector3 objects are output to the parent App.vue component, where the data is displayed.
https://nakamura196.github.io/nuxt3-babylonjs/5/
Sending data from Vue to BabylonJS with an exposed BabylonJS Engine and Scene object
And the third method we try is exposing the Engine and Scene objects to the BabylonScene Vue component.
https://nakamura196.github.io/nuxt3-babylonjs/6/
Summary
I have not fully understood the differences between each approach, so I would like to continue investigating.
I hope this serves as a useful reference for using Babylon.js with Vue (Vue 3 and Nuxt 3).