SYSTEM/docs/architecture/routing.md

7. Routing

Routing will be handled by Nuxt's file-based router. All pages will be created as .vue files in the app/pages directory.

Route Configuration Example (app/pages/cell/[id].vue)

<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const cellId = route.params.id as string;

// Fetch cell data using the service
const { data: cell, pending, error } = await useAsyncData(
  `cell-${cellId}`,
  () => cellService.getCellById(cellId)
);
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">Error loading Cell: {{ error.message }}</div>
  <div v-else-if="cell">
    <h1>{{ cell.commonGood }}</h1>
    <!-- Display cell details here -->
  </div>
</template>