First step toward a Vue 3 / Nuxt 3 / Playwright e2e frontend stack. Adds: - frontend/ - Nuxt 3 scaffold (TypeScript) - frontend/components/HealthDashboard.vue - calls /api/healthz, shows status/version/uptime/timestamp - frontend/pages/index.vue - landing page using HealthDashboard - frontend/nuxt.config.ts - dev proxy /api -> http://localhost:8080 - frontend/playwright.config.ts + tests/e2e/health.spec.ts - 1 baseline e2e test - .gitignore - frontend artifacts excluded Out of scope (separate PRs): - Storybook - Design system / Tailwind - Auth pages - Production build / deploy config Generated ~95% in autonomy by Mistral Vibe via ICM workspace ~/Work/Vibe/workspaces/frontend-nuxt-scaffold/. Trainer (Claude) finalized commit/PR (Mistral hit max-turns or trainer takeover). 🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
23 lines
790 B
Vue
23 lines
790 B
Vue
<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>
|