long36708/longmo-skills

Overview

This skill provides practical best practices for maintaining and developing Vue 2 applications with a focus on stable Options API code, clear state management with Vuex, and preparing projects for an eventual move to Vue 3. It emphasizes predictable patterns, reduced coupling, and safe logic reuse to keep legacy codebases maintainable and migration-ready.

How this skill works

The skill inspects component structure and Vuex usage, enforcing a consistent Options API order and prop/data conventions. It flags risky patterns (mixins, global event buses, arrow functions in methods) and suggests safer alternatives like utility functions, namespaced Vuex modules, and Composition API adoption in Vue 2.7+ for progressive migration.

When to use it

• When maintaining or refactoring an existing Vue 2 codebase to improve readability and reliability.
• Before starting a migration plan toward Vue 3 to identify deprecated patterns and compatibility risks.
• When standardizing component structure across a team to reduce onboarding friction.
• During code reviews to catch anti-patterns (mixins abuse, direct DOM manipulation, implicit globals).
• When reorganizing Vuex into scalable, namespaced modules for large applications.

Best practices

• Follow a consistent Options order: name, components, props, data, computed, watch, lifecycle hooks, methods.
• Keep data as a function returning an object to avoid shared mutable state between instances.
• Prefer utility functions or HOCs over mixins; if mixins are used, prefix names and document sources.
• Use props down / events up and avoid global event bus; prefer Vuex for cross-component state.
• Organize Vuex with namespaced modules, put async logic in actions, and enable strict mode in dev.
• Avoid arrow functions in methods and lifecycle hooks; use this.$set or Vue.set to add reactive properties.

Example use cases

• Reformatting components to a standardized Options order for a large legacy project.
• Refactoring a tangled mixin into explicit utility imports and a namespaced Vuex module.
• Auditing a repository to remove filters, inline templates, and other Vue 2 features incompatible with Vue 3.
• Converting derived data from watchers to computed properties to improve performance and clarity.
• Introducing the Composition API plugin in Vue 2.7+ to start writing migration-friendly code.