Vue Naming Standards
Jump to navigation
Jump to search
Introduction
I guess I run with whatever the linter tells me but wanted to capture a way here
Naming Standards
Here we go
| Element | Convention | Example |
|---|---|---|
| Component Tag* | PascalCase | <SidebarListPanel /> |
| Component File | PascalCase | SidebarListPanel.vue |
| Prop Name | camelCase | sidebarList |
| Event Name | kebab-case | item-clicked |
| TypeScript Interface | PascalCase | CobolVersionsType |
| Type File | kebab-case | cobol-versions-type.ts |
| Folder Name | kebab-case | components/ |
| Multi-word Folder | kebab-case | shared-utils/ |
- Vue’s compiler supports both kebab-case and PascalCase in templates, but PascalCase is the most popular convention in modern Vue projects. It matches the component’s import name, works seamlessly with auto-import tools like Nuxt or Vite, and aligns with TypeScript’s naming style — making your codebase more consistent and maintainable.