# 4. Component Standards

To ensure consistency and maintainability, all Vue components created in this project must adhere to the following standards.

## Component Template (`.vue` files)

All components should follow the standard Vue 3 `<script setup>` syntax. This is the recommended modern approach by both Vue and Nuxt documentation.

Here is a minimal template for a new component:
```vue
<script setup lang="ts">
// 1. IMPORTS
// e.g., import { ref } from 'vue';
// e.g., import Button from 'primevue/button';

// 2. PROPS & EMITS
// e.g., const props = defineProps<{
//   citizenId: string;
// }>();
// e.g., const emit = defineEmits(['updated']);

// 3. STATE & COMPOSABLES
// e.g., const count = ref(0);
// e.g., const { citizen } = useCitizen();

// 4. COMPUTED PROPERTIES & WATCHERS
// ...

// 5. LIFECYCLE HOOKS
// ...

// 6. METHODS
// e.g., function signTransaction() { ... }
</script>

<template>
  <!-- 
    Component template. Use PrimeVue components and Tailwind CSS classes here.
    e.g., <div class="p-4 border-round-md"> ... </div>
  -->
</template>

<style scoped lang="scss">
/* 
  Component-specific SCSS goes here.
  Global variables/mixins are available thanks to nuxt.config.ts.
  e.g., .my-component { color: var(--primary-color); }
*/
</style>
```

## Naming Conventions

*   **Components:** `PascalCase`. Files should match the component name (e.g., `CellDetailView.vue`).
*   **Composables:** `camelCase` with a `use` prefix (e.g., `useLedger.ts`).
*   **SCSS Variables:** `$kebab-case` (e.g., `$primary-accent-color`).