Имена компонентов

Компоненты называют в PascalCase: каждое слово с заглавной буквы, без пробелов и других знаков между словами: MenuItem, CafeHeader, OrderList. Файл называется так же, MenuItem.vue, и так же пишутся импорт и тег в шаблоне.

Почему заглавные? Теги HTML пишутся строчными: <header>, <menu>, <li>. Заглавная буква сразу показывает, что тег — это компонент, а не HTML-элемент. Показывает она это и Vue: для <MenuItem /> Vue берёт компонент, который <script setup> импортировал под этим именем. Тег строчными буквами, например <menuitem />, — уже другое имя. Vue не находит компонента с таким именем, и консоль сообщает:

[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» означает «не удалось найти компонент». (Вторая строка — про пользовательские элементы, сложную возможность HTML, её можно пропустить.) Тогда Vue помещает на страницу пустой элемент <menuitem>, который ничего не показывает.

То же предупреждение появится, если забыть импорт: <MenuItem /> без import MenuItem from "./MenuItem.vue"; даёт Failed to resolve component: MenuItem. Поэтому, если компонент не показывается, загляните в консоль, потом проверьте его импорт и то, как имя написано в теге и в импорте.

Vue понимает ещё одну запись: <menu-item />, строчными буквами через дефис. Она встречается в старом коде и в учебниках. В этом курсе имена пишутся так же, как называются файлы, — в PascalCase.