PyCafe - Solara - Vue3 script setup Demo with esm imports

app.py
import.vue
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script setup>
import {ref} from 'vue'

import confetti from "https://esm.sh/canvas-confetti@1.6.0";
import {Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale} from 'chart.js'
import {Bar} from "vue-chartjs"
import ConfettiExplosion from "vue-confetti-explosion"

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const frontendCount = ref(0)

const chartData = {
  labels: ['January', 'February', 'March'],
  datasets: [{data: [40, 20, 12]}]
};
const chartOptions = {
  responsive: true
};

function double(v) {
  return v * 2;
}
</script>

<template>
  <ConfettiExplosion/>
  <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>
  <div>
    <v-btn @click="confetti()" color="primary">confetti</v-btn>
  </div>
  <Bar
      id="my-chart-id"
      :options="chartOptions"
      :data="chartData"
  >
</template>

app.py

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
29
import solara                
clicks = solara.reactive(0)

# workaround. This component should go into ipyvue
@solara.component_vue("import.vue")
def Imports(event_loaded, imports):
    pass


@solara.component_vue("template.vue")
def MyTemplate(solara_count):
    pass

import_map_loaded = solara.reactive(False)

@solara.component
def Page():
    Imports(
        event_loaded=lambda *args: import_map_loaded.set(True),
        imports={
            "chart.js": "https://esm.sh/chart.js@4.4.4",
            "vue-confetti-explosion": "https://esm.sh/vue-confetti-explosion@1.0.2?external=vue",
            "vue-chartjs": "https://esm.sh/vue-chartjs@5.3.1?external=vue,chart.js"
        }
    )
    if import_map_loaded.value:
        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

Py.Cafe

vue3-script-setup-esm

Vue3 script setup Demo with esm imports