From 16c71c32545c1246bb38354a3cbca475e8d9aba0 Mon Sep 17 00:00:00 2001
From: Micha Huhn <michahuhndev@gmx.de>
Date: Sun, 5 Apr 2026 17:40:53 +0200
Subject: [PATCH] fix: reorder Vue component

---
 templates/vue-ts/src/App.vue | 44 ++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/templates/vue-ts/src/App.vue b/templates/vue-ts/src/App.vue
index 4fa5d8e273b..1ccbbb20838 100644
--- a/templates/vue-ts/src/App.vue
+++ b/templates/vue-ts/src/App.vue
@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { tables, reducers } from './module_bindings';
+import { useSpacetimeDB, useTable, useReducer } from 'spacetimedb/vue';
+
+const conn = useSpacetimeDB();
+const name = ref('');
+
+// Subscribe to all people in the database
+const [people] = useTable(tables.person);
+
+const addReducer = useReducer(reducers.add);
+
+const addPerson = () => {
+  if (!name.value.trim() || !conn.isActive) return;
+
+  // Call the add reducer
+  addReducer({ name: name.value });
+  name.value = '';
+};
+</script>
+
 <template>
   <div :style="{ padding: '2rem' }">
     <h1>SpacetimeDB Vue App</h1>
@@ -37,25 +59,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { tables, reducers } from './module_bindings';
-import { useSpacetimeDB, useTable, useReducer } from 'spacetimedb/vue';
-
-const conn = useSpacetimeDB();
-const name = ref('');
-
-// Subscribe to all people in the database
-const [people] = useTable(tables.person);
-
-const addReducer = useReducer(reducers.add);
-
-const addPerson = () => {
-  if (!name.value.trim() || !conn.isActive) return;
-
-  // Call the add reducer
-  addReducer({ name: name.value });
-  name.value = '';
-};
-</script>