Embedding entire Bokeh app in Vue

Hi,

I’ve been exploring the documentation and discourse looking for examples of how to embed an entire Bokeh app in a Vue app but didn’t find any so I am now sharing my implementation so that it may help others that are also interested in integrating Bokeh with Vue.

The Bokeh server is embedded in a Flask app. The frontend calls the corresponding endpoint that calls server_document to return a script that we then inject into the page. This script then injects another script that will replace the former with the entire Bokeh app and initiate a Websocket connection directly to the Bokeh server.

https://github.com/alexisagos/bokeh-vue

Let me know what you think ! Interested in knowing how others have integrated a Bokeh app in Vue.

Alexis

Hi @Alexis ,

There’s always a lot of interest in embedding Bokeh apps in different frameworks, so this is really a valuable example. Thanks so much for sharing your work with us, and the Bokeh community! Is it okay if we mention it in a tweet? If so, do you have a Twitter handle we should tag?

Hi Carolyn,

Of course ! Feel free to mention this in a tweet, no need to tag me though, I’m not very active there.

Here’s a quick video showing the websocket in action:

Hi @Alexis

Thanks for sharing. Why do you need to bring Flask into the mix? Could you not just connect Vue to the Tornado backend?

Hi Alexis,

This is really cool.

Btw I have a silly question, how did you a create a video of your dashboard. I too want to share some of my bokeh work but dont know how to create a video of my dashboard.

Thanks