vue-dat-gui for vue doesn't work with "Cannot read property '_c' of undefined" error message

Question

I'm trying to rut dat.gui in Vue3 environment. And I found npm dat.gui for Vue. According to the documentation, it says I need to import it in main.js and app.use(GUI) and then I could use it as a global component.

What I did is as below.

main.js

import DatGui from '@cyrilf/vue-dat-gui'

const app = createApp(App);
app.use(router)
app.use(DatGui)

in one of my components

    <div class='horizontal-container dark-background white-text' v-if='showup' ref='container'>
        <canvas id='myCanvas' ref='myCanvas'></canvas>
        <div class='menu-text white-text medium medium-text'>This is Landing Page</div>
        <year-select class='year-selection'></year-select>
        <div>{{boroughData}}</div>
    </div>
    </transition>

<dat-gui closeText="Close controls" openText="Open controls" closePosition="bottom">
    
        <dat-number v-model="cameraZ" :min="0" :max="5" :step="0.5" />
        <dat-number v-model="maxRadius" :min="1" :max="5" :step="0.1"/>
        <dat-number v-model="spacing" :min="1" :max="10" :step="0.5" />

</dat-gui>


  data(){
      return{
          showup:false,
          sRadius:2,
          targetCounty:undefined,
          mouse:{x:undefined,y:undefined},
          getIntersect:false,
          cWidth:undefined,
          cHeight:undefined,
          cameraZ:5,
          maxRadius:5,
          spacing:5
      }
  },

Then it throws an error message saying

What is wrong with my dat.gui?

Answer 1

I'm a bit late to answer but I come with some good news. I released a Vue3 version of vue-dat-gui.

You can find the repo here : https://github.com/cyrilf/vue-dat-gui with all the instructions to install it.

There is also a demo page.

In your case, to install it, you need to do:

npm install --save @cyrilf/vue-dat-gui@~1.0.11

and then

import { createApp } from "vue";
import VueDatGui from "@cyrilf/vue-dat-gui";
import "@cyrilf/vue-dat-gui/dist/style.css";

/* your code */
// ...

const app = createApp(App)
app.use(router)
app.use(VueDatGui)

// ...

app.mount("#app")

Feel free to open an issue, if you have any problem.

Answer 2

@cyrilf/vue-dat-gui was built for Vue 2, so you need to use the Vue 3 migration build to make the library work in your project.

To setup your Vue CLI scaffolded project:

1. Install the Vue compatibility build and SFC compiler that matches your Vue build version (i.e., install @vue/compat@^3.1.0 and @vue/compiler-sfc@^3.1.0 if you have vue@^3.1.0 in package.json):

   npm i -S @vue/compat@^3.1.0
   npm i -S @vue/compiler-sfc@^3.1.0
   

2. Configure Webpack to alias vue to the @vue/compat build, and set vue-loader's compatibility mode to Vue 2:

   // vue.config.js
   module.exports = {
     chainWebpack: config => {
       config.resolve.alias.set('vue', '@vue/compat')
   
       config.module
         .rule('vue')
         .use('vue-loader')
         .tap(options => {
           return {
             ...options,
             compilerOptions: {
               compatConfig: {
                 MODE: 2
               }
             }
           }
         })
     }
   }
   

demo