All scenes
Frontend HMR
Frontend Live Preview
pulse-dashboardfeat/live-metrics
PROMPT · 0%
AGENT REASONING
Read the visual targetCards must update live without shifting their grid or remounting.
1<script setup lang="ts">
2import { computed } from 'vue'
3import { Activity, ArrowUpRight, Users } from 'lucide-vue-next'
4import { useLiveMetrics } from '@/composables/useLiveMetrics'
5
6const props = defineProps<{ projectId: string }>()
7const { metrics, status } = useLiveMetrics(props.projectId)
8
9const cards = computed(() => [
10 { label: 'Active users', value: metrics.value.activeUsers, icon: Users },
11 { label: 'Events / min', value: metrics.value.eventsPerMinute, icon: Activity },
12])
13</script>
14
15<template>
16 <section class="dashboard-grid">
17 <article v-for="card in cards" :key="card.label" class="metric-card">
18 <component :is="card.icon" :size="18" />
19 <span>{{ card.label }}</span>
20 <strong>{{ card.value.toLocaleString() }}</strong>
21 <small><ArrowUpRight :size="13" /> live</small>
22 </article>
23 </section>
24 <footer :data-status="status">Updated from the live stream</footer>
25</template>
localhost:3000/dashboard
OVERVIEW
LIVELive metrics
About this scene
Frontend Live Preview
A Vue dashboard evolves beside its live browser preview as components, responsive states, tests, and hot updates stay in lockstep.
Designed for deep work, streaming backgrounds, and the quiet pleasure of watching software take shape.