vue.js vue-gl missing props camera in component - vue.js

Question

I installed Vue-gl in my app.js as
const { VglRenderer, VglScene } = require('vue-gl');
Object.keys(VueGL).forEach((name) => Vue.component(name, VueGL[name]));
Then in my parent component I have a child component:
<scene :positionItem="positionItem"></scene>
import scene from "./../components/scene";
Having this code:
export default {
name: "configurator",
components :{
scene
},
data: function(){
return {
positionItem: -4,
}
},
methods:{
updatePosition(){
this.$root.$emit("input", {
positionItem :this.$refs.positionItem.value
})
}
},
mounted() {
this.$root.$on('input', data => {
this.positionItem = data;
});
}
}
The child component "scene" is
<template>
<vgl-renderer >
<vgl-sphere-geometry name="sphere"></vgl-sphere-geometry>
<vgl-scene name="main">
<!-- Re-rendering will be triggered when zCoordinate changes. -->
<vgl-mesh :position="`0 0 ${positionItem}`" geometry="sphere"></vgl-mesh>
</vgl-scene>
<vgl-perspective-camera orbit-position="12 0 0" name="camera"></vgl-perspective-camera>
</vgl-renderer>
<script lang="ts">
export default {
props: ["positionItem"],
data: function () {
return {
}
},
}
</script>
The renders works but I got 2 errors about missing props camera and scene:
vue.esm.js?efeb:628 [Vue warn]: Missing required prop: "camera"
found in
--->
at src/components/scene.vue
at src/components/configurator.vue
at src/App.vue
How to fix it?

Answer 1

I had the exact same problem. The vgl-renderer component needs to be given a name and a screne property of type string. These components must be present in the scene with the same names. Otherwise vue-gl will throw another error. I can't find anything about these required properties on the vue-gl documentation. Maybe it's outdated. I managed to get it working like this ...
<template>
<vgl-renderer
camera= "camera"
scene= "scene"
class="getting-started"
>
<vgl-box-geometry name="box"></vgl-box-geometry>
<vgl-scene name="scene">
<vgl-mesh geometry="box"></vgl-mesh>
</vgl-scene>
<vgl-perspective-camera name="camera" orbit-position="3 1 0.5"></vgl-perspective-camera>
</vgl-renderer>
</template>
<script>
const { VglRenderer, VglScene, VglBoxGeometry, VglMesh, VglPerspectiveCamera } = require('vue-gl');
export default {
components : {
VglRenderer, VglScene, VglBoxGeometry, VglMesh, VglPerspectiveCamera
}
}
</script>