match-component-file-name.md

require component name property to match its file name (vue/match-component-file-name)

• ⚙️ This rule is included in "plugin:vue/recommended".

You can choose which file extension this rule should verify the component's name:

• .jsx (default): jsx
• .jsx and .vue: both

By default this rule will only verify components in a file with a .jsx extension. Files with .vue extension uses their resgistered name by default. The only use case where you need to specify a name for your component in a .vue file is when implementing recursive components.

The option to verify both files extensions is added to increase consistency in projects where its style guide requires every component to have a name property, although, as stated above it is unnecessary.

📖 Rule Details

This rule reports if a component name property does not match its file name.

👎 Examples of incorrect code for this rule:

// file name: src/MyComponent.jsx
export default {
  name: 'MComponent', // note the missing y
  render: () {
    return <h1>Hello world</h1>
  }
}

👍 Examples of correct code for this rule:

// file name: src/MyComponent.jsx
export default {
  name: 'MyComponent',
  render: () {
    return <h1>Hello world</h1>
  }
}

🔧 Options

• "jsx" (default) ... verify components in files with .jsx extension.
• "both" ... verify components in files with both .jsx and .vue extensions.