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.