init

src/App.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useEventSource } from '@vueuse/core'
+import { computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStatusStore } from '@/stores/status.ts'
+import { useIssueStore } from '@/stores/issue.ts'
+
+const route = useRoute()
+const issueStore = useIssueStore()
+const statusStore = useStatusStore()
+
+interface IssueSseEvent {
+  type: string
+}
+
+const { data } = useEventSource<string[], IssueSseEvent>(
+  'http://localhost:3333/api/issues/events',
+  ['issue.created', 'issue.updated', 'issue.deleted'],
+  {
+    serializer: { read: (v) => (v ? JSON.parse(v) : null) },
+    autoReconnect: {
+      retries: 3,
+      delay: 1000,
+      onFailed() {
+        console.log('Failed to connect EventSource after 3 retries')
+      },
+    },
+    autoConnect: true,
+  },
+)
+
+watch(data, () => {
+  if (
+    data.value?.type === 'issue.created' ||
+    data.value?.type === 'issue.updated' ||
+    data.value?.type === 'issue.deleted'
+  ) {
+    issueStore.getStat()
+  }
+})
+
+const layout = computed(() => {
+  const layout = route?.meta?.layout
+  return layout ? `${layout}Layout` : 'DefaultLayout'
+})
+
+onMounted(async () => {
+  await statusStore.list()
+  await issueStore.getStat()
+})
+</script>
+
+<template>
+  <component :is="layout">
+    <router-view v-slot="{ Component, route }">
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
+    </router-view>
+  </component>
+</template>
+
+<style scoped></style>