Streamlit Component template in Vue.js

Vue 2 template to build a Streamlit component. Uses Vue.js scoped slot to send parameters from Streamlit Python script into args props of your component.

Setup

Copy paste of the original component-template quickstart.

Ensure you have Python 3.6+, Node.js, and npm installed.
Clone this repo.
Create a new Python virtual environment for the template:

$ python3 -m venv venv  # create venv
$ . venv/bin/activate   # activate venv
$ pip install streamlit # install streamlit

Initialize and run the component template frontend:

$ cd my_component/frontend
$ npm install    # Install npm dependencies
$ npm run start  # Start the Webpack dev server

From a separate terminal, run the template’s Streamlit app:

$ . venv/bin/activate  # activate the venv you created earlier
$ streamlit run my_component/__init__.py  # run the example

If all goes well, you should see something like this:
Modify the frontend code at my_component/frontend/src/MyComponent.vue.
- Parameters passed by Python script are made available in args props.
Modify the Python code at my_component/__init__.py.
Feel free to rename the my_component folder, MyComponent.vue file with its import in App.vue, and package name in setup.py and package.json.

Resources

GitHub

View Github