prop-name-casing.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/prop-name-casing	enforce specific casing for the Prop name in Vue components	v4.3.0

vue/prop-name-casing

enforce specific casing for the Prop name in Vue components

• ⚙️ This rule is included in all of "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

This rule enforce proper casing of props in vue components(camelCase).

<script>
export default {
  props: {
    /* ✓ GOOD */
    greetingText: String,

    /* ✗ BAD */
    'greeting-text': String,
    greeting_text: String
  }
}
</script>

🔧 Options

{
  "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
}

• "camelCase" (default) ... Enforce property names in props to camel case.
• "snake_case" ... Enforce property names in props to snake case.

"snake_case"

<script>
export default {
  props: {
    /* ✓ GOOD */
    greeting_text: String,

    /* ✗ BAD */
    'greeting-text': String,
    greetingText: String
  }
}
</script>

📚 Further Reading

• Style guide - Prop name casing

👫 Related Rules

• vue/attribute-hyphenation
• vue/custom-event-name-casing

🚀 Version

This rule was introduced in eslint-plugin-vue v4.3.0

🔍 Implementation

• Rule source
• Test source