LowFile-scopeJavaScript / TypeScript Plug & play

Single-file component filename casing

Filenames of Single-File Components should either be always PascalCase or always kebab-case.

Why this matters

PascalCase works best with autocompletion in code editors, as it's consistent with how we reference components in JS(X) and templates. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why kebab-case is also perfectly acceptable.

Bad vs. good

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

Avoid

components/
|- mycomponent.vue

components/
|- myComponent.vue

Prefer

components/
|- MyComponent.vue

components/
|- my-component.vue

More snippets

Bad

mycomponent.vue

Bad

myComponent.vue

Good

MyComponent.vue

Good

my-component.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

More snippets

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

More snippets

Related rules

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

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

Use component-scoped styling