andfanilo / streamlit-component-template-vue

Vue 2/3 template for Streamlit Components

Streamlit Component template in Vue.js

Vue 3 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 serve  # 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

• Higher Order Components in Vue.js
• Do we need Higher Order Components in Vue.js?
• Build better higher-order components with Vue 3
• Scoped slots
• Using Slots in Vue.js
• Single File Components
• SFC Spec