Component naming
Consistent component names make code easier to read, search and avoid clashing with HTML.
In this page:
Syntax
<!-- PascalCase in single-file components -->
<MultiWordName />
<!-- kebab-case in in-DOM templates -->
<multi-word-name></multi-word-name>Component naming
Use PascalCase for component names in single-file components and multi-word names such as TodoItem to avoid HTML element clashes. Base components can use a Base prefix, single-instance ones The, and tightly coupled children a parent prefix.
In in-DOM templates use kebab-case tags.
Note:
Multi-word names never collide with current or future HTML elements.
Example: Component naming
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<todo-item text="Buy milk"></todo-item>
<todo-item text="Write code"></todo-item>
</div>
<script>
const app = Vue.createApp({});
// Registered with PascalCase, used with kebab-case in the page
app.component("TodoItem", { props: ["text"], template: "<p>[ ] {{ text }}</p>" });
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: [ ] Buy milk[ ] Write code
-->Related Topics
Common Mistakes
- Single-word names like Card or Button
- Mixed naming styles
- PascalCase tags in in-DOM templates
Chapter Summary
- Use multi-word names
- PascalCase in SFCs
- kebab-case in in-DOM templates
- Prefix conventions help
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: