LowFile-scopeJavaScript / TypeScript Plug & play

Tightly coupled component names

Child components that are tightly coupled with their parent should include the parent component name as a prefix.

Why this matters

If a component only makes sense in the context of a single parent component, that relationship should be evident in its name. This also keeps related files next to each other in editors.

Bad vs. good

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

Avoid

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

Prefer

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.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