Nuxt 4 Architecture & Nuxt UI (Reka UI) Systems

// 1. Nuxt 4 Unified Directory Structure (app/)
// app/pages/index.vue
<script setup lang="ts">
// 2. Deduplicated, Universal Data Fetching with useAsyncData
const { data: telemetry, status } = await useAsyncData('cluster-health', () =>
  $fetch('/api/v1/metrics')
);

// 3. Nuxt UI / Reka UI Compound Component
const items = [
  [{ label: 'System Dashboard', icon: 'i-heroicons-chart-bar' }],
  [{ label: 'Disconnect', icon: 'i-heroicons-arrow-left-on-rectangle' }]
];
</script>

<template>
  <div class="p-6">
    <!-- Nuxt UI Dropdown with integrated Reka UI accessibility -->
    <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
      <UButton color="primary" variant="solid" label="Cluster Actions" />
    </UDropdown>

    <div v-if="status === 'pending'" class="skeleton-loader" />
    <pre v-else>{{ telemetry }}</pre>
  </div>
</template>