Demo example

[gurbain]

Hi,

Sorry for this noob question, I'm completely new with VueJs and I can't grasp how to make your library work. I started from this HelloWorld repository, and I adapted it to integrate your VueJS components in a test page as suggested. The result is here: https://github.com/gurbain/vue-ros3djs-hello-world. (with the test component here: https://github.com/gurbain/vue-ros3djs-hello-world/blob/master/src/App.vue)

However, when I try it, nothing appears in the browser and I get the following messages in the console:

[Vue warn]: Unknown custom element: <ros3d-viewer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-axes> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

[Vue warn]: Unknown custom element: <ros3d-laser-scan> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueRos3djsDemo> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5938
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
eval @ App.vue?234e:35
EventEmitter.emit @ eventemitter2.js?7232:352
onOpen @ SocketAdapter.js?461e:74

Any idea where this could come from and how to solve it? Thank you very much!

[LdwgWffnschmdt]

Your code seems to be correct, try downgrading to version 1.0.4. I think I messed something up when redoing the build process.

[pjreed]

Should the current version work? Are there an complete examples I can use to test?

I'm running into a similar issue as the original reporter -- I've set up a "Hello, world" Vue project and am trying to get the vuew-ros3djs components to display in it, but I only see a blank page. I'm not even getting any warnings or errors in the build log or debug console. I'm using vue-ros3djs version 1.1.1 right now, but downgrading to 1.0.4 doesn't make any difference for me.

Maybe it's just an issue in my code, but it would be great if there was a fully-functioning demo of vue-ros3djs so I could test it. The snippet in the README doesn't even build as-is because <ros3d-laser-scan topic="/laserscan"> is not closed.

[yyds-18]

Should the current version work? Are there an complete examples I can use to test?

I'm running into a similar issue as the original reporter -- I've set up a "Hello, world" Vue project and am trying to get the vuew-ros3djs components to display in it, but I only see a blank page. I'm not even getting any warnings or errors in the build log or debug console. I'm using vue-ros3djs version 1.1.1 right now, but downgrading to 1.0.4 doesn't make any difference for me.

Maybe it's just an issue in my code, but it would be great if there was a fully-functioning demo of vue-ros3djs so I could test it. The snippet in the README doesn't even build as-is because <ros3d-laser-scan topic="/laserscan"> is not closed.

I also encountered it. This is a bug and has not been resolved.

[ydevurai]

WebSocket connection to 'ws://localhost:9090/' failed: Ros.connect @ Ros.js?5356:77 Ros @ Ros.js?5356:55 mounted @ 3dlist.vue?e6d9:27 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863 callHook @ vue.runtime.esm.js?2b0e:4235 insert @ vue.runtime.esm.js?2b0e:3158 invokeInsertHook @ vue.runtime.esm.js?2b0e:6390 patch @ vue.runtime.esm.js?2b0e:6609 Vue._update @ vue.runtime.esm.js?2b0e:3960 updateComponent @ vue.runtime.esm.js?2b0e:4075 get @ vue.runtime.esm.js?2b0e:4495 Watcher @ vue.runtime.esm.js?2b0e:4484 mountComponent @ vue.runtime.esm.js?2b0e:4088 Vue.$mount @ vue.runtime.esm.js?2b0e:8459 mount @ client.js?06a0:738 clientFirstMount @ client.js?06a0:791 eval @ client.js?06a0:799 _callee6$ @ client.js?06a0:491 tryCatch @ runtime.js?96cf:62 invoke @ runtime.js?96cf:296 prototype. @ runtime.js?96cf:114 asyncGeneratorStep @ asyncToGenerator.js?1da1:3 _next @ asyncToGenerator.js?1da1:25 eventemitter2.js?7232:396 Uncaught Error: Uncaught, unspecified 'error' event. at Ros.EventEmitter.emit (eventemitter2.js?7232:396:1) at WebSocket.onError (SocketAdapter.js?461e:101:1)