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:

<!-- 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:

try { loading.value = true // API call } catch (err) { error.value = 'User-friendly message' console.error('Debug info:', err) } finally { loading.value = false }