LowFile-scopeJavaScript / TypeScript Plug & play

Self-closing components

Components with no content should be self-closing in Single-File Components, string templates, and JSX - but never in in-DOM templates.

Why this matters

Self-closing components communicate that they not only have no content, but are *meant* to have no content. It also makes your code cleaner.

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

Avoid


<MyComponent></MyComponent>


<my-component/>

Prefer


<MyComponent/>


<my-component></my-component>

Bad

<MyComponent></MyComponent>

Bad

<my-component/>

Good

<MyComponent/>

Good

<my-component></my-component>

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