components

Components

1. Use Primevue components for all UI components.
2. Use <script setup lang="ts"> for all components.

Props and Events

Always inline the type definition in defineProps<> and defineEmits<>. Avoid creating a separate type just for props.

• Good

  defineProps<{ x: string; y: number }>();
  defineEmits<{ (e: 'update:modelValue', value: string): void }>();
  

• Bad

  type Props = { x: string; y: number };
  type Emits = { (e: 'update:modelValue', value: string): void };
  defineProps<Props>();
  defineEmits<Emits>();
  

Destructuring Props

Destructure props with toRefs for better reactivity and clarity. Avoid directly accessing props in function calls.

• Good

  const props = defineProps<{ myProp: string }>();
  const { myProp } = toRefs(props);
  useForm({ myProp });
  

• Bad

  const props = defineProps<{ myProp: string }>();
  useForm(props.myProp);
  

Structure

Use the following layout for every component to keep imports and growth consistent:

ComponentName/
  ├─ index.ts           # Re-export (single public entry)
  ├─ Container.vue      # Main component implementation
  ├─ useForm.ts         # Optional: composable when logic grows (e.g. forms)
  └─ DependentComponent.vue

ComponentName/index.ts

export { default as ComponentName } from "./Container.vue";

When a child piece becomes complex or needs its own hook, use the same pattern as the parent:

ComponentName/
  └─ DependentComponent/
       ├─ index.ts
       └─ Container.vue

Styling

1. Use Tailwind CSS for all styling:
   • Apply utility classes directly in templates for layout and styling.
   • Avoid custom CSS unless absolutely necessary for reusable or complex styles.