LowFile-scopeJavaScript / TypeScript Plug & play

Order of words in component names

Component names should start with the highest-level (often most general) words and end with descriptive modifying words.

Add to Mesrai Open workspace

Why this matters

This makes it easier to see the relationships between components at a glance, especially when editors organize files alphabetically.

Bad vs. good

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

Avoid

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

Prefer

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.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