Create Component based on VueJS
- From the template folder
- Create new component using vite and add init.py code for testing the component
$ mkdir vite_vue_component
$ cd vite_vue_component
$ npm init vite@latest frontend --template vue # npm v6 (v7 is different)
$ touch __init__.py # command may be different in Windows
- Add in the init.py code below
import os
import streamlit.components.v1 as components
_RELEASE = False
if not _RELEASE:
_component_func = components.declare_component(
"vite_vue_component",
url="http://localhost:3000", # vite dev server port
)
else:
parent_dir = os.path.dirname(os.path.abspath(__file__))
build_dir = os.path.join(parent_dir, "frontend/dist")
_component_func = components.declare_component("vite_vue_component", path=build_dir)
def my_component(name, key=None):
component_value = _component_func(name=name, key=key, default=0)
return component_value
if not _RELEASE:
import streamlit as st
st.subheader("Component Test")
num_clicks = my_component(name = "NameViteVue")
st.markdown("You've clicked %s times!" % int(num_clicks))
- install the frontend node libraries, streamlit-component-lib, create vite.config.js
$ cd frontend
$ npm i
$ npm i streamlit-component-lib
- Add the following property to vite.config.js
base: './',
- replace App.vue file with the following code
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="doClick">click</button>
<p>Count {{ count }}</p>
</div>
</template>
<script>
import { Streamlit } from 'streamlit-component-lib'
import { ref, onMounted } from 'vue'
export default {
setup(props, context) {
const msg = ref('No Msg')
const count = ref(0)
const doClick = () => {
count.value += 1
Streamlit.setComponentValue(count.value)
}
const onRender = (event) => {
const data = event.detail
msg.value = `Hello, ` + data.args['name']
Streamlit.setFrameHeight()
}
onMounted(() => {
Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
Streamlit.setComponentReady()
Streamlit.setFrameHeight()
})
return {
doClick,
count,
msg
}
}
}
</script>
Running the example
From the base directory, navigate to the frontend and serve it from a dev server:
$ cd template/vite_vue_component/frontend
$ npm run dev
On a separate terminal, from base directory, navigate to and run the Streamlit app (assuming python environment has been activated):
$ cd template
$ streamlit run vite_vue_component/__init__.py # run the example
You should see the following image below. Button click will increment the count.
Top comments (0)