prop-name-casing.md

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

vue/prop-name-casing

enforce specific casing for the Prop name in Vue components

• ⚙️ This rule is included in "plugin:vue/strongly-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

🔍 Implementation

• Rule source
• Test source