From be8d293cbd0195b206ce23a3c4f35f6455f4f147 Mon Sep 17 00:00:00 2001
From: Joseph Burkhart <61951318+josephburkhart@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:31:33 -0500
Subject: [PATCH 1/2] Watch for changes in js and vue files

---
 examples/custom_vue_component/main.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/custom_vue_component/main.py b/examples/custom_vue_component/main.py
index bd373eecf..7afdbfcb2 100755
--- a/examples/custom_vue_component/main.py
+++ b/examples/custom_vue_component/main.py
@@ -14,4 +14,4 @@
 
 ui.button('Reset', on_click=counter.reset).props('small outline')
 
-ui.run()
+ui.run(uvicorn_reload_includes="*.py,*.js,*.vue")

From 822a5d9fd89b017d1b566d9ac2c2924be73bbeef Mon Sep 17 00:00:00 2001
From: Joseph Burkhart <61951318+josephburkhart@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:31:44 -0500
Subject: [PATCH 2/2] Switch from js to vue file

---
 examples/custom_vue_component/counter.py  |  2 +-
 examples/custom_vue_component/counter.vue | 28 +++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 examples/custom_vue_component/counter.vue

diff --git a/examples/custom_vue_component/counter.py b/examples/custom_vue_component/counter.py
index c2a23bdd2..59799f335 100644
--- a/examples/custom_vue_component/counter.py
+++ b/examples/custom_vue_component/counter.py
@@ -3,7 +3,7 @@
 from nicegui.element import Element
 
 
-class Counter(Element, component='counter.js'):
+class Counter(Element, component='counter.vue'):    # you can also use component='counter.js'
 
     def __init__(self, title: str, *, on_change: Optional[Callable] = None) -> None:
         super().__init__()
diff --git a/examples/custom_vue_component/counter.vue b/examples/custom_vue_component/counter.vue
new file mode 100644
index 000000000..bde702322
--- /dev/null
+++ b/examples/custom_vue_component/counter.vue
@@ -0,0 +1,28 @@
+<template>
+    <button @click="handle_click">
+      <strong>{{title}}: {{value}}</strong>
+    </button>
+  </template>
+  
+  <script>
+    export default {
+      data() {
+        return {
+          value: 0
+        }
+      },
+      methods: {
+        handle_click() {
+          this.value += 1;
+          this.$emit("change", this.value);
+        },
+        reset() {
+          this.value = 0
+        },
+        dummy() {}
+      },
+      props: {
+        title: String
+      }
+    }
+  </script>
\ No newline at end of file