LowFile-scopeJavaScript / TypeScript Plug & play

Component name casing in JS/JSX

Component names in JS/JSX should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.

Add to Mesrai Open workspace

Why this matters

PascalCase is the convention for classes and constructors in JavaScript. Vue components have instances, so PascalCase makes sense. It also helps distinguish components from HTML elements in JSX and templates. Kebab-case is acceptable in strings for global registration.

Bad vs. good

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

Avoid

app.component('myComponent', { /*... */ })

import myComponent from './MyComponent.vue'

export default {
 name: 'myComponent'
 //...
}

export default {
 name: 'my-component'
 //...
}

Prefer

app.component('MyComponent', { /*... */ })

app.component('my-component', { /*... */ })

import MyComponent from './MyComponent.vue'

export default {
 name: 'MyComponent'
 //...
}

More snippets

Bad

app.component('myComponent', { /*...*/ })

Bad

import myComponent from './MyComponent.vue'

Bad

export default { name: 'my-component' }

Good

app.component('MyComponent', { /*...*/ })

Good

app.component('my-component', { /*...*/ })

Good

import MyComponent from './MyComponent.vue'

Good

export default { name: '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

Bad vs. good

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

Avoid

app.component('myComponent', { /*... */ })

import myComponent from './MyComponent.vue'

export default {
 name: 'myComponent'
 //...
}

export default {
 name: 'my-component'
 //...
}

Prefer

app.component('MyComponent', { /*... */ })

app.component('my-component', { /*... */ })

import MyComponent from './MyComponent.vue'

export default {
 name: 'MyComponent'
 //...
}

More snippets

Bad

app.component('myComponent', { /*...*/ })

Bad

import myComponent from './MyComponent.vue'

Bad

export default { name: 'my-component' }

Good

app.component('MyComponent', { /*...*/ })

Good

app.component('my-component', { /*...*/ })

Good

import MyComponent from './MyComponent.vue'

Good

export default { name: '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