Employ Code Splitting Strategies
Code splitting will improve web app functionality by shortening and dividing code into shorter segments. It will not only reduce the initial load time but also deliver an exceptional user experience.
Always or Never Use Shorthand
Be consistent with your use or lack of use of shorthand. Many developers use shorthand directives like: for v-bind, etc. Choose to use them always or avoid them.
For Events, Use Kebab-Case
To make your code easier to read and for greater consistency, use a kebab-case, particularly for events.
Data Should Return a Functional
In most cases, you will want to create components that are reusable. We want each returned object to be unique. This is accomplished by returning data objects inside a function.
Do Not Use v-if with v-for for Elements
To filter elements of an array, it may appear to be best to use v-if with v-for. VueJS, however, prioritizes v-for over the v-if command, creating a loop. A better answer would be to iterate over a computed property. Rendering is effective as it doesn't loop over every item.
Use Clear Definitions to Validate Props
This is particularly important when working on larger-scale projects or when working on a team project. This can avoid confusion in the future and time-consuming troubleshooting. Writing good definitions to validate props can pay big dividends.
Use Inside v-for
The v-for directive can keep your application predictable and consistent when making adjustments to data. This is especially useful when using Vue transitions and animations.
Use KebabCase in Templates: Declare Props with CamelCase
Make Consistent Use of PascalCase or KebabCase For Components
Whichever of the two you choose, use it consistently. Since PascalCase works with most IDE auto-complete features, it is often favored.
Prefix Base Components
Best practices for managing base elements, HTML elements, and third-party UI components are to name them using a prefix of “Base”. “V” or “App”. Keep consistency throughout the project.
Use “The” for Declared Components Only Used Once
Components that are only used once on a page, like headers or footers, should use the prefix “The.” For example, the footer should be named “TheFooter.vue.”