Skip to content

Latest commit

 

History

History
109 lines (74 loc) · 3.11 KB

match-component-import-name.md

File metadata and controls

109 lines (74 loc) · 3.11 KB
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.

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

  • ❗ This rule has not been released yet.

📖 Rule Details

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

Case can be one of: "kebab-case" or "PascalCase"

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

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

🔧 Options

{
  "vue/match-component-import-name": [
    "error",
    {
      "prefix": "prefix-",
      "case": "kebab-case"
    }
  ]
}
  • "prefix": "" ... array of file extensions to be verified. Default is set to the empty string.
  • "case": "PascalCase" ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to PascalCase.

{}

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

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

{ case: 'kebab-case' }

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

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

{ prefix: 'Prefix' }

/* ✓ 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 } }

{ case: 'kebab-case', prefix: 'prefix-' }

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

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

🔍 Implementation