The style guide is currently a bit outdated. Most examples are in Options API only, and there are no rules regarding
<script setup> and Composition API. We are planning to improve it in the future.
This is the official style guide for Vue-specific code. If you use Vue in a project, it's a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don't believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values.
Finally, we've split rules into four categories:
Priority A: Essential (Error Prevention)
Priority B: Strongly Recommended
These rules have been found to improve readability and/or developer experience in most projects. Your code will still run if you violate them, but violations should be rare and well-justified.
Priority C: Recommended
Where multiple, equally good options exist, an arbitrary choice can be made to ensure consistency. In these rules, we describe each acceptable option and suggest a default choice. That means you can feel free to make a different choice in your own codebase, as long as you're consistent and have a good reason. Please do have a good reason though! By adapting to the community standard, you will:
- Train your brain to more easily parse most of the community code you encounter
- Be able to copy and paste most community code examples without modification
- Often find new hires are already accustomed to your preferred coding style, at least in regards to Vue
Priority D: Use with Caution
Some features of Vue exist to accommodate rare edge cases or smoother migrations from a legacy code base. When overused however, they can make your code more difficult to maintain or even become a source of bugs. These rules shine a light on potentially risky features, describing when and why they should be avoided.