Uncaught TypeError: (0 , vue_vtk_js__WEBPACK_IMPORTED_MODULE_3__.registerComponents) is not a function

[wxfred]

I'm using Vue Cli 5 to create a Vue 2 project.

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { registerComponents } from 'vue-vtk-js'

Vue.config.productionTip = false

registerComponents(Vue)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

HomeView.vue

<template>
  <div class="home">
    <vtk-view>
      <vtk-geometry-representation>
        <vtk-polydata
          :points="[0,0,0,0,1,0,1,0,0]"
          :polys="[3,0,1,2]"
        >
          <vtk-point-data>
            <vtk-data-array
              registration="setScalars"
              name="temperature"
              :values="[0, 0.5, 1]"
            />
          </vtk-point-data>
        </vtk-polydata>
      </vtk-geometry-representation>
    </vtk-view>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  components: {
  }
}
</script>

[wxfred]

[Vue warn]: Unknown custom element: <vtk-view> - did you register the component correctly? ...

<template>
  <div class="home">
    <vtk-view>
      <vtk-geometry-representation>
        <vtk-polydata
          :points="[0,0,0,0,1,0,1,0,0]"
          :polys="[3,0,1,2]"
        >
          <vtk-point-data>
            <vtk-data-array
              registration="setScalars"
              name="temperature"
              :values="[0, 0.5, 1]"
            />
          </vtk-point-data>
        </vtk-polydata>
      </vtk-geometry-representation>
    </vtk-view>
  </div>
</template>

<script>
import { VtkView, VtkGeometryRepresentation, VtkPolydata, VtkPointData, VtkReader } from 'vue-vtk-js'
export default {
  components: {
    VtkView,
    VtkGeometryRepresentation,
    VtkPolydata,
    VtkPointData,
    VtkReader,
  },
}
</script>

[jourdain]

It seems we only expose the vue plugin so the README is misleading.

import VTK from 'vue-vtk-js'
Vue.use(VTK);
[...]

[wxfred]

@jourdain I tried Vue.use, new error appears in chrome console.

No input!                           vue-vtk.umd.js?296f:30545
vtkErrorMacro   @   vue-vtk.umd.js?296f:30545
publicAPI.renderPiece   @   vue-vtk.umd.js?296f:49240
publicAPI.render    @   vue-vtk.umd.js?296f:48295
publicAPI.opaquePass    @   vue-vtk.umd.js?296f:48295
publicAPI.apply @   vue-vtk.umd.js?296f:10396
publicAPI.traverse  @   vue-vtk.umd.js?296f:10396
publicAPI.traverseOpaquePass    @   vue-vtk.umd.js?296f:38691
publicAPI.traverse  @   vue-vtk.umd.js?296f:10387
publicAPI.traverse  @   vue-vtk.umd.js?296f:10396
publicAPI.traverse  @   vue-vtk.umd.js?296f:32921
publicAPI.traverseAllPasses @   vue-vtk.umd.js?296f:12360
forceRender @   vue-vtk.umd.js?296f:75620
publicAPI.render    @   vue-vtk.umd.js?296f:76085
publicAPI.render    @   vue-vtk.umd.js?296f:19833
eval    @   vue-vtk.umd.js?296f:85315
later   @   vue-vtk.umd.js?296f:31613
setTimeout (async)      
debounced   @   vue-vtk.umd.js?296f:31613
eval    @   vue.runtime.esm.js?c320:3141
flushCallbacks  @   vue.runtime.esm.js?c320:3063
Promise.then (async)        
timerFunc   @   vue.runtime.esm.js?c320:3088
nextTick    @   vue.runtime.esm.js?c320:3153
Vue.$nextTick   @   vue.runtime.esm.js?c320:2660
onResize    @   vue-vtk.umd.js?296f:85500
eval    @   vue-vtk.umd.js?296f:85311

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VTK from 'vue-vtk-js'

Vue.config.productionTip = false

Vue.use(VTK)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

[jourdain]

Seems like it is working but your representation has no input.

[wxfred]

@jourdain Thanks a lot, it works. I forgot to set the url of vtk-reader after I changed test codes.