Py.Cafe
Vue3 script setup Demo
- app.py
- requirements.txt
- template.vue
template.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup>
import { ref } from 'vue'
const frontendCount = ref(0)
function double(v) {
return v * 2;
}
</script>
<template>
<div>
<v-btn
@click="solara_count++"
color="primary"
>
solara_count: {{ double(solara_count) }}
</v-btn>
</div>
<div>
<v-btn @click="frontendCount++" color="primary">{{ frontendCount }}</v-btn>
</div>
</template>
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
import solara
clicks = solara.reactive(0)
@solara.component_vue("template.vue")
def MyTemplate(solara_count):
pass
@solara.component
def Page():
MyTemplate(solara_count=clicks.value, on_solara_count=clicks.set)
solara.Text(f"solara_count: {clicks.value}")
requirements.txt
1
2
3
4
solara ipyvue==3.0.0a3 ipyvuetify==3.0.0a2