vue/match-component-file-name

Require a component name to match its file name.

Applies to: Vue SFC templates and blocks, with script context where the rule requires it.

The filename is part of this check. The default comparison converts a declared component name to PascalCase or kebab-case and compares it with the unchanged file stem. Files containing several component definitions are left alone.

Bad

The declared component name OtherPanel does not match the MyPanel.vue file stem under the supported casing conversions.

MyPanel.vue

<script setup lang="ts">
defineOptions({ name: "OtherPanel" });
</script>

Good

Name the component MyPanel so the declared name matches the file containing it.

MyPanel.vue

<script setup lang="ts">
defineOptions({ name: "MyPanel" });
</script>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "vue/match-component-file-name": "warn"
    }
  },
});

Then run vp run lint.

Related

• Vue rules
• All rules
• Source code