Py.Cafe

mariobuikhuizen/

vue3-script-setup-ts

Vue3 typescript script setup Demo

DocsPricing
  • 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
25
26
27
28
<script setup lang="ts">
import { ref } from 'vue'

class Rating {
  constructor(public value: number, private max: number) {}
}

const frontendCount = ref(0)

function double(v: number) {
    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.0a4
ipyvuetify==3.0.0a2