no-restricted-component-names.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-restricted-component-names	disallow specific component names	v9.15.0

vue/no-restricted-component-names

disallow specific component names

• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

This rule allows you to specify component names that you don't want to use in your application.

<!-- ✗ BAD -->
<script>
export default {
  name: 'Disallow',
}
</script>

<!-- ✓ GOOD -->
<script>
export default {
  name: 'Allow',
}
</script>

🔧 Options

This rule takes a list of strings, where each string is a component name or pattern to be restricted:

{
  "vue/no-restricted-component-names": ["error", "foo", "/^Disallow/"]
}

Alternatively, you can specify an object with a name property and an optional message and suggest property:

{
  "vue/no-restricted-component-names": [
    "error",
    {
      "name": "Disallow",
      "message": "Please do not use `Disallow` as a component name",
      "suggest": "allow"
    },
    {
      "name": "/^custom/",
      "message": "Please do not use component names starting with 'custom'"
    }
  ]
}

<!-- ✗ BAD -->
<script>
export default {
  name: 'Disallow',
}
</script>

👫 Related Rules

• vue/restricted-component-names

🚀 Version

This rule was introduced in eslint-plugin-vue v9.15.0

🔍 Implementation

• Rule source
• Test source