Component Names

Components are named in PascalCase: each word starts with a capital letter, with nothing between the words: MenuItem, CafeHeader, OrderList. The file has the same name, MenuItem.vue, and so do the import and the tag in the template.

Why the capitals? HTML tags are lowercase: <header>, <menu>, <li>. A capital letter tells you at once that a tag is a component, not an HTML element. And it tells Vue, too: for <MenuItem />, Vue uses the component that <script setup> imported under that name. A tag in lowercase, such as <menuitem />, is a different name. Vue finds no component of that name, and the console says:

[Vue warn]: Failed to resolve component: menuitem
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>

“Failed to resolve component” means “I couldn't find the component”. (The second line is about custom elements, an advanced feature of HTML, and you can skip it.) Vue then puts an empty element <menuitem> on the page, which shows nothing.

The same warning comes when you forget the import: <MenuItem /> without import MenuItem from "./MenuItem.vue"; gives Failed to resolve component: MenuItem. So when a component doesn't show, look into the console, then check its import, and how its name is spelled in the tag and in the import.

Vue understands one more spelling: <menu-item />, in lowercase with hyphens. You'll see it in older code and in tutorials. This course writes the names as the files are named, in PascalCase.