Vue Jsx Best Practices

What it does

This skill provides best practices for writing Vue.js code using JSX syntax. It focuses on ensuring clean, efficient, and maintainable code within a Vue 3 project utilizing Vite and Pinia. The skill aims to improve the overall quality of your frontend development workflow by adhering to established conventions.

When to use it

• You're starting a new Vue 3 project with JSX and want to establish good coding habits from the beginning.
• You’re refactoring existing Vue code that uses JSX and need guidance on improving its structure and readability.
• A team is working on a Vue project, and you need to enforce consistent coding standards for JSX usage.
• You're experiencing issues with your Vue/JSX codebase (e.g., performance problems or difficult debugging) and want to identify potential areas for improvement.

Key capabilities

• Provides guidance on component structure using JSX.
• Offers advice on efficient data handling within JSX components.
• Suggests best practices for event handling in JSX.
• Promotes code readability and maintainability through consistent formatting.

Example prompts

• "How should I structure a Vue 3 component with JSX?"
• "What are the best practices for passing props to a child component using JSX?"
• "Can you give me an example of efficient data handling in a Vue/JSX component?"

Tips & gotchas

This skill assumes familiarity with basic Vue.js concepts and JSX syntax. While it provides guidance, understanding these fundamentals is important to effectively apply the suggested best practices.