Streamlit Custom Components Vite VueJS

$ 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

import osimport streamlit.components.v1 as components_RELEASE = Falseif 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_valueif 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))

$ cd frontend$ npm i$ npm i streamlit-component-lib

  base: './',

<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>

$ cd template/vite_vue_component/frontend$ npm run dev

$ cd template$ streamlit run vite_vue_component/__init__.py  # run the example