The Naming Conventions OF Vue File

[studymansoga]

In a Vue 3 scaffolding project, I noticed that the file naming convention uses Pascal Case (e.g., HelloWorld.vue). Within the file, you can specify a name attribute to define the component name. This allows the name attribute to be different from the file name. The only reason we found for this was that third-party component checks require component names to have more than one word, which could be achieved by changing the name field. However, this makes code maintenance confusing, as the component name may not correspond to the file name. We prefer to change the file name to meet the requirements.

In other files, we use components in the same way as the file name, e.g., . I thought that by adhering to this convention, my project would look consistent. However, when using elements-plus components like , I felt frustrated. I decided to compromise and follow the kebab-case convention suggested by VS Code, using . I thought everything would become neat and tidy, but TypeScript caused more trouble. If I don't restore hello-world to Pascal Case (HelloWorld), TypeScript can't recognize the types, which is frustrating. Here's the code:

My child component code:
//FileName: AddConfig
`const dialogFormVisible = ref(false)

// Show popup
function showAddPop() {
dialogFormVisible.value = true
}
defineExpose({
showAddPop,
})`

Parent component code:
<div><add-config ref="addConfigEl"></add-config>xx</div> const addConfigEl = ref<InstanceType<typeof AddConfig> | null>(null) const addConfig = () => { if (addConfigEl.value) { addConfigEl.value.showAddPop() } }

Because of these reasons, your project may end up with multiple naming conventions and inconsistencies between file names and component names, which is quite messy. A simple Vue 3 + Vite + VSCode + TypeScript + Prettier + ESLint project already has over a dozen configuration files—it's incredibly complex. Spring is becoming simpler, but this frontend stack is getting more and more complicated. The addition of TypeScript makes a lot of the code look strange and verbose.

[ismaildasci]

Hey, totally get the frustration here - the naming convention situation can feel messy at first, but there is actually a consistent approach that works well.

The Vue Style Guide recommendation:

PascalCase for both file names AND template usage is the preferred convention. So HelloWorld.vue as the file name and <HelloWorld /> in your templates. This is what the Vue Style Guide recommends as "strongly recommended".

Why this works best:

1. TypeScript loves it - as you discovered, typeof AddConfig needs the PascalCase import name to work properly for type inference
2. Consistency - file name matches exactly how you use the component
3. Distinguishes from native HTML - <HelloWorld> is clearly a component, <div> is clearly native HTML

What about kebab-case like <el-menu-item>?

Element Plus and other libraries use kebab-case because it's valid HTML and works in DOM templates. But in SFCs with <script setup>, you can actually use PascalCase for those too: <ElMenuItem> works fine!

My suggestion:

Just stick with PascalCase everywhere in your own code. Don't let VS Code's auto-conversion to kebab-case confuse you - you can configure that. The TypeScript benefits alone make PascalCase worth it.

The complexity you're feeling is real, but naming conventions is one area where there's actually a clear winner: PascalCase all the way.