VueGL and Webpack

I’m trying to use vue-gl in my project but I’m a bit confused about Webpack.

Installation
Step 1) To install libraries, run following command in your project directory: npm i vue three vue-gl
Step 2) Then you can import VueGL components like below.

const { VglRenderer, VglScene } = require(‘vue-gl’);

Question: Where? In my app.js or in my webpack.config.js? Or in my component?

My App uses Webpack and it has components and sub-components.

The structure is just like: App.vue -> stageComponent.vue -> scene.vue

So scene component is the sub-component having the render.

scene.vue

 <template>
     <vgl-renderer class="getting-started" name="vgl-renderer">
              <vgl-box-geometry name="box"></vgl-box-geometry>
              <vgl-scene>
                       <vgl-mesh geometry="box"></vgl-mesh>
                 </vgl-scene>
             <vgl-perspective-camera orbit-position="3 1 0.5"></vgl-perspective-camera>
      </vgl-renderer>
  </template>

Step 3) To register all VueGL components, run following script after loading libraries.

Object.keys(VueGL).forEach((name) => Vue.component(name, VueGL[name]));

I did it in my app.js

const { VglRenderer, VglScene } = require(‘vue-gl’);
Object.keys(VueGL).forEach((name) => Vue.component(name, VueGL[name]));

But I got the error

ReferenceError: VueGL is not defined

this error goes if I add the library to my html:

<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/vue-gl"></script>

But why they are not loaded by the npm import?

@ascweb did you ever get this figured out? I’m having the same issue…