Streamlit Component Vue Vite Template

A template for creating Streamlit Components. It uses Vue 3 to code the frontend and Vite to serve the files locally during development, as well as bundle and compile them for production.

This repo contains templates and example code for creating Streamlit Components. For complete information, please see the Streamlit Components documentation!

Quickstart

Ensure you have Python 3.6+, Node.js and npm installed.

1. Clone this repository:

git clone git@github.com:gabrieltempass/streamlit-component-vue-vite-template.git

2. Go to the frontend directory and initialize and run the component template frontend:

cd streamlit-component-vue-vite-template/streamlit_layoutr/frontend

npm install
npm run dev

3. From a separate terminal, go to the repository root directory, create a new Python virtual environment, activate it and install Streamlit and the template as an editable package:

cd streamlit-component-vue-vite-template

python3 -m venv venv
. venv/bin/activate
pip install streamlit
pip install -e .

Still from the same separate terminal, run the example Streamlit app:

streamlit run streamlit_layoutr/example.py

If all goes well, you should see something like this:

Modify the frontend code at streamlit_layoutr/frontend/src/MyComponent.vue. Modify the Python code at streamlit_layoutr/__init__.py.

References

This template is based on:

• the original template made by the Streamlit team, that uses React (instead of Vue 3) and Webpack (instead of Vite).
• streamlit-component-template-vue, by @andfanilo, that uses Vue 2 or 3 and Webpack (instead of Vite).