✨ feat(frontend): scaffold minimal Nuxt 3 frontend with healthz dashboard (#25)
First Vue 3 / Nuxt 3 / Playwright frontend layer for dance-lessons-coach. Minimal: 1 page, 1 component fetching /api/healthz, 1 e2e test. Out of scope: Storybook, design system, auth pages, deploy. ~95% Mistral autonomous via ICM workspace ~/Work/Vibe/workspaces/frontend-nuxt-scaffold/. Mistral handled the npx nuxi init TUI by falling back to manual file creation (Q-032 documented). Co-authored-by: Gabriel Radureau <arcodange@gmail.com> Co-committed-by: Gabriel Radureau <arcodange@gmail.com>
This commit was merged in pull request #25.
This commit is contained in:
22
frontend/components/HealthDashboard.vue
Normal file
22
frontend/components/HealthDashboard.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
interface HealthInfo {
|
||||
status: string
|
||||
version: string
|
||||
uptime_seconds: number
|
||||
timestamp: string
|
||||
}
|
||||
const { data, pending, error } = await useFetch<HealthInfo>('/api/healthz')
|
||||
</script>
|
||||
<template>
|
||||
<section data-testid="health-dashboard">
|
||||
<h2>Server Health</h2>
|
||||
<p v-if="pending">Loading...</p>
|
||||
<p v-else-if="error">Error loading health: {{ error.message }}</p>
|
||||
<ul v-else-if="data" data-testid="health-info">
|
||||
<li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
|
||||
<li><strong>Version:</strong> {{ data.version }}</li>
|
||||
<li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
|
||||
<li><strong>Last check:</strong> {{ data.timestamp }}</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user