LowFile-scopeJavaScript / TypeScript Plug & play

vue/attribute-hyphenation

Enforces consistent usage of hyphenated (kebab-case) or non-hyphenated (camelCase) attribute names on custom components in templates.

Add to Mesrai Open workspace

Why this matters

HTML attributes are traditionally hyphenated and case-insensitive. While Vue allows camelCase props to be bound using kebab-case in templates, consistency in the template itself (always using kebab-case or always using camelCase where possible) improves readability and aligns with chosen project conventions.

Bad vs. good

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

Avoid

// Config: 'always' (hyphenated)
<MyComponent myProp="value"></MyComponent>

// Config: 'never' (camelCase)
<MyComponent my-prop="value"></MyComponent>

Prefer

// Config: 'always' (hyphenated)
<MyComponent my-prop="value"></MyComponent>

// Config: 'never' (camelCase)
<MyComponent myProp="value"></MyComponent>

More snippets

Bad

// Config: 'always'
<MyComponent myProp="value"></MyComponent>

Bad

// Config: 'never'
<MyComponent my-prop="value"></MyComponent>

Good

// Config: 'always'
<MyComponent my-prop="value"></MyComponent>

Good

// Config: 'never'
<MyComponent myProp="value"></MyComponent>

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

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

Avoid

// Config: 'always' (hyphenated)
<MyComponent myProp="value"></MyComponent>

// Config: 'never' (camelCase)
<MyComponent my-prop="value"></MyComponent>

Prefer

// Config: 'always' (hyphenated)
<MyComponent my-prop="value"></MyComponent>

// Config: 'never' (camelCase)
<MyComponent myProp="value"></MyComponent>

More snippets

Bad

// Config: 'always'
<MyComponent myProp="value"></MyComponent>

Bad

// Config: 'never'
<MyComponent my-prop="value"></MyComponent>

Good

// Config: 'always'
<MyComponent my-prop="value"></MyComponent>

Good

// Config: 'never'
<MyComponent myProp="value"></MyComponent>

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