Skip to content

codedealer/streamlit-component-template-vue

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Differences from the upstream

Built with Vite, Vue3 and Typescript to be light and fast.

Setup

  • Ensure you have Python 3.8+, Node.js, npm and (optionally) yarn installed.
  • Generate template from this repo by using Use this template button on the repo's Github page.
  • Create a new Python virtual environment for the template using your preferred method.
  • Install Streamlit:
$ pip install streamlit
  • Initialize and run the component template frontend:
$ cd my_component/frontend
$ yarn install    # Install the dependencies
$ yarn run dev  # Start the dev server
  • From a separate terminal, run the template's Streamlit app:
$ streamlit run my_component/__init__.py
  • If all goes well, you should see something like this: Quickstart Success
  • Modify the frontend code at my_component/frontend/src/Component.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, Component.vue file with its import in app.vue, and package name in setup.py and package.json.

Publish

When you're ready to publish the component:

  • Rename your my_component folder to the name of your component if you haven't done so yet
  • Pass your component's name in declare_component in __init__.py
  • Change _RELEASE to True in __init__.py
  • Edit MANIFEST.in, change the path for recursive-include from package/frontend/dist * to <component name>/frontend/dist *
  • Edit setup.py and provide the relevant info about your component
  • Run from your frontend folder
$ yarn run build

The component is ready to be published. You can follow the tutorials available online on how to build a wheel and publish it to PyPI or it can now be installed directly from github (in which case don't forget to include frontend/dist folder in your repo).

Resources

About

Vue 3 template for Streamlit Components

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 41.4%
  • Python 30.9%
  • TypeScript 20.1%
  • JavaScript 5.5%
  • HTML 2.1%