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)