vue/name-property-casing

enforce specific casing for the name property in Vue components

⚙️ This rule is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended".
🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims at enforcing the style for the name property casing for consistency purposes.


                <script>
  /* ✓ GOOD */
  export default {
    name: 'MyComponent'
  }
</script>

Now loading...


                <script>
  /* ✗ BAD */
  export default {
    name: 'my-component'
  }
</script>

Now loading...

{
  "vue/name-property-casing": ["error", "PascalCase" | "kebab-case"]
}


                <script>
  /* ✓ GOOD */
  export default {
    name: 'my-component'
  }
</script>

Now loading...


                <script>
  /* ✗ BAD */
  export default {
    name: 'MyComponent'
  }
</script>

Now loading...