Názvy komponent

Komponenty se pojmenovávají v zápisu PascalCase, ve kterém každé slovo začíná velkým písmenem a mezi slovy nic není: PolozkaMenu, Hlavicka, Objednavka. Soubor se jmenuje stejně, PolozkaMenu.vue, a stejně se píše i import a tag v šabloně.

Proč velká písmena? Tagy HTML se píšou malými písmeny: <header>, <menu>, <li>. Podle velkého písmena hned poznáte, že tag je komponenta, a ne prvek HTML. A poznává to i Vue: pro <PolozkaMenu /> použije komponentu, kterou <script setup> pod tímhle jménem importoval. Tag psaný malými písmeny, třeba <polozkamenu />, je jiné jméno. Vue komponentu s takovým jménem nenajde a konzole hlásí:

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

„Failed to resolve component“ znamená „komponentu se nepodařilo najít“. (Druhý řádek se týká vlastních prvků HTML, což je pokročilá funkce, a můžete ho přeskočit.) Vue pak na stránku vloží prázdný prvek <polozkamenu>, který nic neukáže.

Stejné varování přijde, když zapomenete import: <PolozkaMenu /> bez import PolozkaMenu from "./PolozkaMenu.vue"; dá [Vue warn]: Failed to resolve component: PolozkaMenu. Když se tedy komponenta neukáže, podívejte se do konzole a pak zkontrolujte její import a to, jak je její jméno napsané v tagu a v importu.

Vue rozumí ještě jednomu zápisu: <polozka-menu />, malými písmeny se spojovníky. Uvidíte ho ve starším kódu a v návodech. V tomhle kurzu píšeme jména tak, jak se jmenují soubory, v PascalCase.