Py.Cafe

mariobuikhuizen/

solara-compose-vue

Solara compose vue

DocsPricing
  • ChildComponent.vue
  • ParentComponent.vue
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import solara
import ipyvue


@solara.component_vue("ParentComponent.vue")
def ParentComponent(children):
    pass

@solara.component_vue("ChildComponent.vue")
def ChildComponent(message):
    pass


@solara.component
def Page():
    with ParentComponent():
        ChildComponent(message="Hello from Parent Component!")
        solara.Button("other Solara component", color="primary")
ParentComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <h1>Parent Component</h1>
    <jupyter-widget v-for="child in children" :widget="child" />
  </div>
</template>

<style>
h1 {
  color: green;
}
</style>
ChildComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<style>
p {
  color: blue;
}
</style>