vue.jsvuejs3dat.gui

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

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 enter image description here

What is wrong with my dat.gui?

Solution

  • @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