DEV Community

Cover image for Vuejs 3 Style Guide
Wadi zaatour
Wadi zaatour

Posted on

Vuejs 3 Style Guide

To be able to write a code in Vuejs 3 framework following the best practices and the standards provided, you should keep in mind this priority based rules:

A - Essential
B - Strongly Recommended
C - Recommended
D - Use with caution

Priority A Rules: Essential

  • Use multi-word component names
  • Use detailed prop definitions
  • Use :key when using v-for in template
  • Avoid v-if with v-for
  • Use component-scoped styling

Priority B Rules: Strongly Recommended

  • Component files means each component should be in its own file
  • Single-file component filename casing (always PascalCase or always kebab-case)
  • Base component names should have a specific prefix, such as Base, App, or V
  • Tightly coupled component names for child should use parent component name as a prefix
  • Order of words in component names means that Component names should start with the highest-level (often most general) words and end with descriptive modifying words
  • Self-closing components <MyComponent/> or <my-component></my-component>
  • Component name casing in templates means component names should always be PascalCase in Single-File Components
  • Full-word component names
  • Prop name casing
  • Simple expressions in templates
  • Simple computed properties
  • Quoted attribute values
  • Directive shorthands

Priority C Rules: Recommended

  • Empty lines in component/instance options if the options can no longer fit on your screen without scrolling
  • Single-file component top-level element order <script>, <template>, and <style> tags consistently, with <style> last, because at least one of the other two is always necessary.

Priority D Rules: Use with Caution

  • Element selectors with scoped
  • Implicit parent-child communication

Curious to know more about Vue Style guide, check this details documentation in the following link:

Top comments (0)