Code Style Guide

Vue Components

• Use <script setup> syntax (Composition API)
• TypeScript for all component logic
• Props typed with defineProps<T>()
• Events typed with defineEmits<T>()
• Tailwind CSS for styling (no scoped CSS)

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
})

const emit = defineEmits<{
  update: [value: string]
}>()
</script>

<template>
  <div class="flex items-center gap-2">
    <h2 class="text-lg font-semibold">{{ title }}</h2>
    <span class="text-sm text-muted">{{ count }}</span>
  </div>
</template>

Composables

• Follow use* naming convention
• Accept reactive parameters (Ref<T>)
• Return reactive state and methods
• Handle loading and error states
• Type all parameters and return values

TypeScript

• Strict mode enabled
• Prefer interfaces over type aliases for objects
• Use Ref<T> and ComputedRef<T> for reactive types
• Generated database types from app/types/database.types.ts

File Naming

Type	Convention	Example
Components	PascalCase	SpecMatchingTab.vue
Composables	camelCase with use prefix	useSpecMatching.ts
Stores	camelCase	app.ts, projects.ts
Server routes	[method].ts	upload.post.ts
Pages	kebab-case	admin/specs.vue

Git Conventions

• Branch names: feature/description, fix/description, refactor/description
• Commit messages: Use conventional commits (feat:, fix:, refactor:, docs:)
• Keep commits focused and atomic