experiment with custom vue component

components/custom.js

@@ -0,0 +1,24 @@
+Vue.component("custom", {
+  template: `
+  <button v-bind:id="jp_props.id">
+    <strong>Custom component</strong><br/>
+    Value = {{jp_props.options.value}}<br/>
+    Click to add 1!
+    </button>`,
+  mounted() {
+    document.getElementById(this.$props.jp_props.id).onclick = () => {
+      const event = {
+        event_type: "onAdd",
+        vue_type: this.$props.jp_props.vue_type,
+        id: this.$props.jp_props.id,
+        page_id: page_id,
+        websocket_id: websocket_id,
+        number: 1,
+      };
+      send_to_server(event, "event");
+    };
+  },
+  props: {
+    jp_props: Object,
+  },
+});

custom_test.py

@@ -0,0 +1,9 @@
+#!/usr/bin/env python3
+from nicegui import ui
+
+with ui.card():
+    custom = ui.custom(on_change=lambda number: label.set_text(f'Custom value: {number}'))
+
+ui.button('Add 100', on_click=lambda: custom.add(100))
+
+label = ui.label()

nicegui/elements/custom.py

@@ -0,0 +1,51 @@
+import justpy as jp
+from .element import Element
+
+class CustomView(jp.JustpyBaseComponent):
+
+    vue_type = 'custom'
+
+    def __init__(self, on_change):
+
+        self.pages = {}
+        self.classes = ''
+        self.options = jp.Dict(value=0)
+
+        self.on_change = on_change
+
+        super().__init__()
+        self.allowed_events = ['onAdd']
+        self.initialize(temp=False, onAdd=self.onAdd)
+
+    def add_to_page(self, wp: jp.WebPage):
+
+        wp.add_component(self)
+
+    def react(self, _):
+
+        pass
+
+    def convert_object_to_dict(self):
+
+        return {
+            'vue_type': self.vue_type,
+            'id': self.id,
+            'show': True,
+            'options': self.options,
+        }
+
+    def onAdd(self, msg):
+
+        self.options.value += msg.number
+        self.on_change(self.options.value)
+
+class Custom(Element):
+
+    def __init__(self, *, on_change):
+
+        super().__init__(CustomView(on_change))
+
+    def add(self, number: str):
+
+        self.view.options.value += number
+        self.view.on_change(self.view.options.value)

nicegui/ui.py

@@ -2,6 +2,7 @@ class Ui:
 
     from .elements.button import Button as button
     from .elements.checkbox import Checkbox as checkbox
+    from .elements.custom import Custom as custom
     from .elements.icon import Icon as icon
     from .elements.input import Input as input
     from .elements.label import Label as label