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: https://vuejs.org/style-guide/
Top comments (0)