JS.VUE.PROP.NAME.CASING

Rule Details

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

{'vue/prop-name-casing': ['error']}

<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"

{'vue/prop-name-casing': ['error', 'snake_case']}

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

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

Further Reading

• Style guide - Prop name casing (https://vuejs.org/style-guide/rules-strongly-recommended.html#prop-name-casing)