# API Pattern

> 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.

- Skill: `diegosouzapw/api-pattern` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/api-pattern`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/api-pattern/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/api-pattern

---


# 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