JS.VUE.MATCH.COMPONENT.IMPORT.NAME

Imported name does not match the name of the components

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 vue/component-definition-name-casing.

{'vue/match-component-import-name': ['error']}

Copy
<script>
export default {
  components: {
    /* GOOD */
    AppButton,
    AppButton: AppButton,
    'app-button': AppButton,

    /* BAD */
    SomeOtherName: AppButton,
    'some-other-name': AppButton
  }
}
</script>

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/