Embedding BrainBrowser in a Vue.js project

[Aharonyn]

Hi,

I have been trying to adjust my project to work with BrainBrowser (SurfaceViewer in particular) but unfortunately I can't seem to grasp the way it should work. The closest I got was to use "require" on each .js file relevant to the SurfaceViewer (according to the demo), and then using the start method (according to instructions in the documentation). I fixed one problem: when getting the dom_element, document couldn't find the canvas div id, because it is nested inside the 'app' div of Vue. I used jQuery in order to fix this: ($('#app').find('#' + element)[0]) The problem now, is that I get this error: SyntaxError: expected expression, got '<'. Apparently, this error is caused by the fact that a javascript file is expected, but the file supplied was html. Here is the code that invokes the error:

BrainBrowser.SurfaceViewer.start('mainBrowser', function(viewer) {
      //Add an event listener.
      viewer.addEventListener('displaymodel', function() {
        console.log('We have a model!')
      })
      // Start rendering the scene.
      viewer.render()
      // Load a model into the scene.
      viewer.loadModelFromURL('/brain-surface.obj')
    })

Does anyone have any experience with embedding this library in Vue, or have any idea how to solve this problem?

Thanks, Noam