Conflict with vue/attribute-hyphenation and vue/prop-name-casing

[nrmmota]

Tell us about your environment

• **ESLint version: 5.12.0
• **eslint-plugin-vue version: 5.1.0
• **Node version: 8.10.0
• **npm version: 3.5.2

Please show your full configuration:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: ['plugin:vue/recommended'],
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,

    'no-undef': 0,

    "max-statements": [2,{ "max": 20 }, { "ignoreTopLevelFunctions": true }]
  }
}

What did you do?

        <va-slide-item
          v-for="(item,index) in slideMenuItems"
          :key="index"
          :data="item"
          :type="item.type"
          :is-header="item.isHeader"
          :icon="item.icon"
          :name="item.name"
          :badge="item.badge"
          :items="item.items"
          :router="item.router"
          :link="item.link"
        />

 export default {
  name: 'va-slide-item',
  props: {
    type: {
      type: String,
      default: 'item'
    },
    'is-header': {
      type: Boolean,
      default: false
    },
 

What did you expect to happen?
Well, for something to give in and work.
Not sure if I'm doing this the right way or not.

What actually happened?
So first it complained about the :isHeader because of the attribute-hyphenated rule.
⚠ https://google.com/#q=vue%2Fattribute-hyphenation Attribute ':isHeader' must be hyphenated

I then switched to is-header and changed the prop on the Component. The property of the component is complaing it's not in camelCase...

⚠ https://google.com/#q=vue%2Fprop-name-casing Prop "is-header" is not in camelCase
content/src/components/VASlideItem.vue:191:5

[thomassjogren]

I don't think there really is a conflict. Any attribute in the HTML - :is-header - is translated to isHeader on the Vue instance. So you should always use "kebab-case" in templates and camelCase for the props declaration.

[mysticatea]

Thank you for this report.

@thomassjogren is right. This is not a conflict.

Originally, HTML is case-insensitive. This is the reason attribute-hyphenation recommends to use hyphenated names by default.