match-component-import-name.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/match-component-import-name	require the registered component name to match the imported component name

vue/match-component-import-name

require the registered component name to match the imported component name

• ❗ This rule has not been released yet.

📖 Rule Details

By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule component-definition-name-casing.

<script>
export default {
  components: {
    /* ✓ GOOD */
    AppButton,
    AppButton: AppButton,

    /* ✗ BAD */
    SomeOtherName: AppButton,
    'app-button': AppButton
  }
}
</script>

🔧 Options

{
  "vue/match-component-import-name": [
    "error",
    {
      "prefix": "prefix-"
    }
  ]
}

• "prefix": "" ... required prefix for registered component names. Default is set to an empty string (no prefix).

{ prefix: 'Prefix' }

<script>
export default {
  components: {
    /* ✓ GOOD */
    PrefixAppButton: AppButton,
    'Prefix-app-button': AppButton,
    
    /* ✗ BAD */
    AppButton,
    SomeOtherName: AppButton,
    'app-button': AppButton,
  }
}
</script>

🔍 Implementation

• Rule source
• Test source