LowFile-scopeJavaScript / TypeScript Plug & play

Base component names

Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as `Base`, `App`, or `V`.

Add to Mesrai Open workspace

Why this matters

These components lay the foundation for consistent styling and behavior. Organizing them with a prefix makes them easy to identify and list together alphabetically. It also avoids arbitrary prefixes for simple wrappers and allows for easier global registration.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

Prefer

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

Related rules

From the same buckets as this rule.

High
Avoid `v-if` with `v-for`
Never use `v-if` on the same element as `v-for`.
performance-efficiencystack-vue+1
High
Disabling Vue.js built-in escaping is security-sensitive
Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the `v-html` directive, unless the content is known to be safe or has been properly sanitized.
security-hardeningstack-vue
High
Use component-scoped styling
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.
module-architecturestack-vue+1

Why this matters

Bad vs. good

Related rules

Avoid `v-if` with `v-for`

Disabling Vue.js built-in escaping is security-sensitive

Use component-scoped styling

Why this matters

Bad vs. good

Related rules

Avoid `v-if` with `v-for`

Disabling Vue.js built-in escaping is security-sensitive

Use component-scoped styling