vue-best-practices

Vue Best Practices Workflow

Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.

Core Principles

• Keep state predictable: one source of truth, derive everything else.
• Make data flow explicit: Props down, Events up for most cases.
• Decompose by responsibility: keep each implementation focused and the contracts between implementations explicit.
• Avoid unnecessary re-renders: use computed properties and watchers wisely.
• Readability counts: write clear, self-documenting code.

1) Confirm architecture before coding (required)

• Default stack: Vue 3 + Composition API + <script setup lang="ts">.
• If the project explicitly uses Options API, load vue-options-api-best-practices skill if available.
• If the project explicitly uses JSX, load vue-jsx-best-practices skill if available.

1.1 Must-read core references (required)

• Before implementing any Vue task, make sure to read and apply these core references:
  • references/reactivity.md
  • references/sfc.md
  • references/component-data-flow.md
  • references/composables.md
• Keep these references in active working context for the entire task, not only when a specific issue appears.

1.2 Plan component boundaries before coding (required)

For a non-trivial feature or structural refactor, sketch responsibilities, state owners, and the contracts that cross their boundaries. For local fixes, preserve existing boundaries unless they obstruct the change.

• Identify substantial UI responsibilities, stateful workflows, and DOM lifecycles in the affected feature. Sketch their owners, consumers, and the contracts needed for coordination.
• Judge cohesion by behavior that changes together or maintains a shared invariant. Being on the same page, reading the same data, or having only one consumer does not by itself justify one implementation.
• Let root/route components compose features and coordinate page behavior. Apply the same responsibility review inside feature components and composables; moving a whole feature to a child or a useFeature() function is not sufficient decomposition.
• Follow the project's layout and scale the design to the affected behavior. A local fix does not require a project-wide component map or new architectural layers.