Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions src/style-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,44 @@ outline: deep

# Style Guide {#style-guide}

::: warning Note
This Vue.js Style Guide is outdated and needs to be reviewed. If you have any questions or suggestions, please [open an issue](https://github.com/vuejs/docs/issues/new).
::: warning Status
This section is under active revision. Priority A: Essential is currently the maintained section of the guide. Priority B, C, and D are retained as legacy reference content.
:::

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.
This is the official style guide for Vue-specific code. It is meant to help teams make sound architectural, semantic, and maintainability decisions in modern Vue applications. However, no style guide is ideal for every team or project, so mindful deviations are still encouraged when they are deliberate and well understood.

For the most part, we also avoid suggestions about JavaScript or HTML in general. We don't mind whether you use semicolons or trailing commas. We don't mind whether your HTML uses single-quotes or double-quotes for attribute values. Some exceptions will exist however, where we've found that a particular pattern is helpful in the context of Vue.
This guide focuses on a small set of human-facing Vue rules. It is not intended to mirror every rule that lint tooling may enforce. Tools such as [eslint-plugin-vue](https://eslint.vuejs.org/), formatters, and other static analysis can still cover broader mechanical correctness and consistency checks.

Finally, we've split rules into four categories:
For the most part, we avoid suggestions about JavaScript or HTML in general. We do not try to settle choices like semicolons, trailing commas, or quote style unless they become specifically important in the context of Vue.

## How to use this guide {#how-to-use-this-guide}

- Start with the [essential rules](./rules-essential). They are the primary maintained part of this guide and focus on component contracts, explicit data flow, component boundaries, and the Vue mental model.
- Treat Priority B, C, and D as legacy reference pages. They may still contain useful conventions, but they are not part of the current maintained scope.
- If your team uses [eslint-plugin-vue](https://eslint.vuejs.org/), expect tooling to enforce additional syntax, correctness, and consistency rules that are not all repeated here.

## Rule Categories {#rule-categories}

### Priority A: Essential (Error Prevention) {#priority-a-essential-error-prevention}
### Priority A: Essential (Maintained) {#priority-a-essential-error-prevention}

These rules help prevent errors, so learn and abide by them at all costs. Exceptions may exist, but should be very rare and only be made by those with expert knowledge of both JavaScript and Vue.
These rules focus on component contracts, explicit data flow, component boundaries, and the Vue mental model. They are written to guide human decisions, not to duplicate every lint rule.

- [See all priority A rules](./rules-essential)

### Priority B: Strongly Recommended {#priority-b-strongly-recommended}
### Priority B: Strongly Recommended (Legacy Reference) {#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.
This page is preserved for historical reference. Its recommendations may still be useful, but they are not part of the current maintained scope.

- [See all priority B rules](./rules-strongly-recommended)

### Priority C: Recommended {#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:
### Priority C: Recommended (Legacy Reference) {#priority-c-recommended}

1. Train your brain to more easily parse most of the community code you encounter
2. Be able to copy and paste most community code examples without modification
3. Often find new hires are already accustomed to your preferred coding style, at least in regards to Vue
This page is also preserved as legacy reference content. It may help teams that want additional conventions, but it is not part of the current maintained scope.

- [See all priority C rules](./rules-recommended)

### Priority D: Use with Caution {#priority-d-use-with-caution}
### Priority D: Use with Caution (Legacy Reference) {#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.
This page remains available as historical guidance on risky patterns, but it is not part of the current maintained scope.

- [See all priority D rules](./rules-use-with-caution)
Loading