api-pattern

sayali-ingle-pdl's avatarfrom sayali-ingle-pdl

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines Vue.js development by providing standardized component structure templates for both Composition API and Options API. It ensures architectural consistency across projects by automatically applying the user's preferred API pattern, TypeScript integration, and scoped styling conventions, making it an essential tool for front-end developers building scalable Vue 3 or legacy Vue 2 applications.

Use Cases

  • Scenario 1: Rapidly scaffolding new Vue 3 components using the modern Composition API with <script setup> and full TypeScript support.
  • Scenario 2: Maintaining or migrating legacy projects by generating components that follow the traditional Options API structure for consistency.
  • Scenario 3: Enforcing project-wide coding standards, including PascalCase naming, scoped SCSS, and mandatory theme variable imports.
  • Scenario 4: Generating complex view components and root App structures with pre-configured lifecycle hooks, props, and event emitters to reduce boilerplate code.
nameapi-pattern
descriptionProvides 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