Skip to content

Latest commit

 

History

History
53 lines (39 loc) · 1.18 KB

README.md

File metadata and controls

53 lines (39 loc) · 1.18 KB

vue-altair-awesomeness

Trying out the new technology of Vue and Altair

npm install -g vue-cli

Then you can use vue to instantiate a new application template. We use the more complicated webpack example here as we want to have a running webpack server.

vue init webpack altair-awesomeness
  • In build/webpack.dev.conf.js, we have added disableHostCheck: true so that in development the server is accesible from any hosts. This allows port forwarding to other hosts, e.g. when running from a container.
  • In config/index.js add an entry that will forward to our local Flask app where we will generate the Vega spec using Altair. 
    proxyTable: {
  '/vega-example': 'http://localhost:5000'
},
  • Install vega-embed using
npm install --save vega-embed
  • In HelloWorld.vue, we have added a script section that will call our Flask backend that returns the Vega specification using Altair.

Running

$ FLASK_APP=app.py flask run
$ cd altair-awesomeness
$ npm run dev

Inspired by:

https://github.com/xhochy

https://github.com/xhochy/altair-vue-vega-example

https://www.youtube.com/watch?v=4L568emKOvs