using client side roslib npm module in a nuxt app

  javascript, nuxt.js, plugins, ros

What is the correct way of using the roslib client side npm module in a nuxt.js app?

roslib was installed using into a default nuxt app using yarn add roslib

This is what I’ve come up with, and while it seems to work I think I have something missing, since when I try to look up the definition for global.ROSLIB in vscode it tells me no definition found for 'ROSLIB'

plugins/roslib.client.js

global.ROSLIB = require('roslib')

nuxt.config.js

...
plugins: [{ src: '~plugins/roslib.client.js', mode: 'client' }],
...

pages/index.vue

<template><div></div></template>
<script>
import {} from '~/plugins/roslib.client'

const ros = new global.ROSLIB.Ros({
  url: 'ws://localhost:9090',
})

ros.on('error', function (error) {
  console.log(error)
})

ros.on('connection', function () {
  console.log('Connection made!')
})

export default {}
</script>

Source: Ask Javascript Questions

LEAVE A COMMENT