{"id":16200366,"url":"https://github.com/andfanilo/streamlit-component-template-vue","last_synced_at":"2025-03-19T05:30:56.882Z","repository":{"id":38276544,"uuid":"280463265","full_name":"andfanilo/streamlit-component-template-vue","owner":"andfanilo","description":"Vue 2/3 template for Streamlit Components","archived":false,"fork":false,"pushed_at":"2023-01-06T11:46:08.000Z","size":1432,"stargazers_count":90,"open_issues_count":17,"forks_count":13,"subscribers_count":3,"default_branch":"vue3","last_synced_at":"2025-03-17T04:21:18.874Z","etag":null,"topics":["python","streamlit","streamlit-components","template-streamlit","typescript","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andfanilo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-17T15:41:55.000Z","updated_at":"2025-02-22T07:23:09.000Z","dependencies_parsed_at":"2023-02-06T00:31:44.563Z","dependency_job_id":null,"html_url":"https://github.com/andfanilo/streamlit-component-template-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-component-template-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-component-template-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-component-template-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andfanilo%2Fstreamlit-component-template-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andfanilo","download_url":"https://codeload.github.com/andfanilo/streamlit-component-template-vue/tar.gz/refs/heads/vue3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244364719,"owners_count":20441458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python","streamlit","streamlit-components","template-streamlit","typescript","vuejs"],"created_at":"2024-10-10T09:30:02.791Z","updated_at":"2025-03-19T05:30:56.336Z","avatar_url":"https://github.com/andfanilo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Streamlit Component template in Vue.js\n\nVue 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.\n\n## Setup\n\n[Copy paste](https://github.com/streamlit/component-template#quickstart) of the original component-template quickstart.\n\n- Ensure you have [Python 3.6+](https://www.python.org/downloads/), [Node.js](https://nodejs.org), and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed.\n- Clone this repo.\n- Create a new Python virtual environment for the template:\n\n```\n$ python3 -m venv venv  # create venv\n$ . venv/bin/activate   # activate venv\n$ pip install streamlit # install streamlit\n```\n\n- Initialize and run the component template frontend:\n\n```\n$ cd my_component/frontend\n$ npm install    # Install npm dependencies\n$ npm run serve  # Start the Webpack dev server\n```\n\n- From a separate terminal, run the template's Streamlit app:\n\n```\n$ . venv/bin/activate  # activate the venv you created earlier\n$ streamlit run my_component/__init__.py  # run the example\n```\n\n- If all goes well, you should see something like this:\n  ![Quickstart Success](quickstart.png)\n- Modify the frontend code at `my_component/frontend/src/MyComponent.vue`.\n  - Parameters passed by Python script are made available in `args` props.\n- Modify the Python code at `my_component/__init__.py`.\n- 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`.\n\n## Resources\n\n- [Higher Order Components in Vue.js](https://medium.com/bethink-pl/higher-order-components-in-vue-js-a79951ac9176)\n- [Do we need Higher Order Components in Vue.js?](https://medium.com/bethink-pl/do-we-need-higher-order-components-in-vue-js-87c0aa608f48)\n- [Build better higher-order components with Vue 3](https://blog.logrocket.com/build-better-higher-order-components-with-vue-3/)\n- [Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots)\n- [Using Slots in Vue.js](https://www.smashingmagazine.com/2019/07/using-slots-vue-js/)\n- [Single File Components](https://v3.vuejs.org/guide/single-file-component.html)\n- [SFC Spec](https://vue-loader.vuejs.org/spec.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandfanilo%2Fstreamlit-component-template-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandfanilo%2Fstreamlit-component-template-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandfanilo%2Fstreamlit-component-template-vue/lists"}