match-component-import-name.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/match-component-import-name	xxx

vue/match-component-import-name

require the registered component name to match the imported component name

This rule reports if a the name of a registered component does not match its imported name.

• ❗ This rule has not been released yet.

📖 Rule Details

This rule has some options.

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

By default, this rule will validate that the imported name is the same casing.

Case can be one of: "kebab" (casing-like-this) or "pascal" (CasingLikeThis)

An optional prefix can be provided that must be prepended to all imports.

If you are not registering components, this rule will be ignored.

/* ✓ GOOD */
export default { components: { AppButton } }

/* ✗ BAD */
export default { components: { SomeOtherName: AppButton } }
export default { components: { 'app-button': AppButton } }

/* ✓ GOOD */
export default { components: { 'app-button': AppButton } }

/* ✗ BAD */
export default { components: { SomeOtherName: AppButton } }
export default { components: { AppButton } }

/* ✓ GOOD */
export default { components: { PrefixAppButton: AppButton } }

/* ✗ BAD */
export default { components: { SomeOtherName: AppButton } }
export default { components: { 'app-button': AppButton } }
export default { components: { 'prefix-app-button': PrefixAppButton } }

🔧 Options

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

• "prefix": "" ... array of file extensions to be verified. Default is set to the empty string.
• "case": "pascal" ... one of "kebab" or "pascal", indicating the casing of the registered name. Default is set to pascal.