# Common Pitfalls

> Apply when debugging errors, reviewing code for issues, or encountering unexpected behavior. Contains known mistakes with ChurchTools API, Vue components, TypeScript, Safari cookies, and form handling.

- Skill: `majiayu000/common-pitfalls` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/common-pitfalls`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/common-pitfalls/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/common-pitfalls

---


# Common Pitfalls

## ChurchTools API

| Pitfall | Wrong | Correct |
|---------|-------|---------|
| Nested params | `{ params: { key: 'val' } }` | `{ key: 'val' }` |
| Delete method | `churchtoolsClient.delete()` | `churchtoolsClient.deleteApi()` |
| Tags response | `response.data` | `response` (direct array) |
| Tag domains | `'appointment'` | `'person' \| 'song' \| 'group'` |

## Vue Components

| Pitfall | Wrong | Correct |
|---------|-------|---------|
| Button type | `<button>` | `<button type="button">` |
| BaseCard import | Absolute path | Relative: `../common/BaseCard.vue` |
| Reactivity | Plain objects | `ref()` or `reactive()` |

## TypeScript

- Check `src/ct-types.d.ts` for ChurchTools types
- Always define interfaces for API responses
- Use strict typing for all data

## Build Issues

- Verify import paths after moving components
- Check for missing dependencies in package.json
- Ensure all required fields in API requests

## Safari-specific

- Blocks `Secure; SameSite=None` cookies on `http://localhost`
- Blocks third-party cookies from different domains
- Solution: Use Vite proxy + HTTPS

## Form Submission

Buttons without `type="button"` will submit forms and cause page reloads:
```vue
<!-- Wrong - triggers form submission -->
<button @click="handleClick">Click</button>

<!-- Correct -->
<button type="button" @click="handleClick">Click</button>
```

## API Error Handling

Always wrap API calls in try-catch with loading states:
```typescript
try {
  loading.value = true
  // API call
} catch (err) {
  error.value = 'User-friendly message'
  console.error('Debug info:', err)
} finally {
  loading.value = false
}
```