SYSTEM/docs/architecture/component-standards.md

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:

<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).