Best practices for Vue.js Composition API Style Guide
.cursorrules in your project root# Vue.js Composition API Style Guide ===================================== ## Core Principles ------------------ * **Separation of Concerns**: Keep components focused on their core functionality and avoid mixing multiple, unrelated concerns. * **Reusability**: Design components to be reusable across the application. * **Readability**: Write code that is easy to understand and maintain. * **Consistency**: Establish a consistent coding style throughout the application. ## Code Style Guidelines ----------------------- ### Naming Conventions * **Component Names**: Use PascalCase for component names (e.g., `MyComponent`). * **Variable Names**: Use camelCase for variable names (e.g., `myVariable`). * **Function Names**: Use camelCase for function names (e.g., `myFunction`). * **Constant Names**: Use uppercase with underscores for constant names (e.g., `MY_CONSTANT`). ### Typing * **Type Annotations**: Use type annotations for function parameters, return types, and variable declarations. * **Type Inference**: Use type inference for variables and function return types when possible. ### Composition API * **Setup Function**: Use the `setup` function as the entry point for the Composition API. * **Ref and Reactive**: Use `ref` and `reactive` to create reactive state. * **Computed Properties**: Use `computed` to create computed properties. * **Watchers**: Use `watch` to create watchers. ## Best Practices ------------------ ### Component Structure * **Keep Components Small**: Break down large components into smaller, more manageable pieces. * **Use Separate Files**: Use separate files for components, services, and utilities. ### State Management * **Use Reactive State**: Use reactive state to manage component state. * **Avoid Mutating State**: Avoid mutating state directly; instead, use the `update` method or `reactive` objects. ### Lifecycle Hooks * **Use Lifecycle Hooks**: Use lifecycle hooks (e.g., `onMounted`, `onUpdated`) to perform side effects. * **Avoid Overusing Lifecycle Hooks**: Avoid overusing lifecycle hooks; instead, use them only when necessary. ### Error Handling * **Use Try-Catch Blocks**: Use try-catch blocks to handle errors. * **Log Errors**: Log errors to the console or a logging service. ## Common Pitfalls to Avoid --------------------------- ### Overusing the `watch` Function * **Avoid Watching Too Many Properties**: Avoid watching too many properties; instead, use a single watcher for related properties. ### Not Using `reactive` or `ref` * **Use `reactive` or `ref` for State**: Use `reactive` or `ref` to create reactive state. ### Not Using Type Annotations * **Use Type Annotations**: Use type annotations to ensure code maintainability and readability. ### Not Following the Single Responsibility Principle * **Keep Components Focused**: Keep components focused on their core functionality; avoid mixing multiple, unrelated concerns. By following these guidelines, you can ensure that your Vue.js Composition API code is maintainable, readable, and efficient.
Comprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.
Cursor
coding
AI coding rules customize how Cursor generates and refactors code for your project. Follow these steps to install Vue.js Composition API Style Guide.
.cursor/rules, for Windsurf use .windsurfrulesComprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.