Api Pattern

---
name: api-pattern
description: Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.
---

# API Pattern Skill

## Purpose
Provides Vue component structure templates and patterns for both Composition API and Options API styles.

## User Choice
The user selects their preferred Vue API pattern:
- `composition-api`: Modern functional approach (recommended for Vue 3)
- `options-api`: Traditional object-based approach (familiar from Vue 2)

## When to Use

Use this skill when generating:
- Vue components (`src/components/**/*.vue`)
- View components (`src/views/**/*.vue`)
- Root App component (`src/App.vue`)
- Any `.vue` single-file component

## Pattern Selection Logic

**Composition API** should be used when:
- User explicitly selects `composition-api`
- Building new Vue 3 applications (recommended default)
- Need better TypeScript integration
- Want improved code reusability via composables
- Working with complex component logic

**Options API** should be used when:
- User explicitly selects `options-api`
- Migrating from Vue 2 applications
- Team preference for object-based structure
- Developer familiarity with Vue 2 patterns

## Templates

See `examples.md` for complete component templates including:
- Basic component structure
- Component with props and emits
- Component with lifecycle hooks
- Component with computed properties
- Component with watchers
- Component with composables/mixins
- View component examples
- Store integration examples

## Key Differences Summary

### Composition API
- Uses `<script setup lang="ts">`
- Reactivity via `ref()`, `reactive()`, `computed()`
- Lifecycle hooks as functions (`onMounted`, `onUpdated`, etc.)
- Code organized by logical concern
- Better tree-shaking and TypeScript inference

### Options API
- Uses `defineComponent()`
- Reactivity via `data()` return object
- Lifecycle hooks as methods (`mounted()`, `updated()`, etc.)
- Code organized by option type
- Familiar structure for Vue 2 developers

## Notes
- Always use TypeScript (`lang="ts"`)
- Always use scoped styles (`<style scoped lang="scss">`)
- Import theme variables: `@use '@/theme/' as *;`
- Follow naming conventions: PascalCase for component names
- Include proper type definitions for props and emits