Unable to use VglObjLoader : "Unknown custom element: <vgl-obj-loader>"

[WaDadidou]

Unable to use VglObjLoader : "Unknown custom element: "

from vue-gl.

[h-ikeda]

Thank you for having a time with VueGL and posting a problem.

Well, sorry but example components currently only supports IIFE and THREE must be loaded globally.

Additionally, you are trying to register the component before unpkg script loaded because the mounted() hook is called very after loading modules.

So that you should load the additional script from unpkg before starting Vue instance, maybe in file like index.js, app.js or main.js...

You also have to pay attention to the variable scope. IIFE script set the component under the global VueGL object, but in module VueGL is an imported local object.
To access global one, window.VueGL is the way.

Actually, of course you must be exhausted in this way, I guess. More directly approach is, making the example components loadable via npm package. I will fix it as soon as possible.

[h-ikeda]

@WaDadidou
I worked around it and release v0.22.0 .

Please update your local vue-gl version first.

npm install vue-gl@latest

Then, you can import the example component (VglObjLoader) in modules.
Try to insert codes that imports and registers the component like below.

import * as VueGL from 'vue-gl';
import VglObjLoader from 'vue-gl/dist/examples/loaders/vgl-obj-loader'; // <- insert this

Object.entries(VueGL).forEach([id, component] => Vue.component(id, component))
Vue.component('VglObjLoader', VglObjLoader); // <- registering our example component

Of course, you can also register the component locally with the component option (as you wrote but commented out in your screenshot).

[WaDadidou]

Hi, thank you ! <3