57 lines
1.5 KiB
Markdown
57 lines
1.5 KiB
Markdown
# 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`).
|