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