Namen von Komponenten

Komponenten werden in PascalCase benannt: Jedes Wort beginnt mit einem Großbuchstaben, ohne etwas zwischen den Wörtern: MenueEintrag, Kopfzeile, Bestellliste. Die Datei heißt genauso, MenueEintrag.vue, und ebenso der Import und der Tag in der Vorlage.

Wozu die Großbuchstaben? HTML-Tags sind klein geschrieben: <header>, <menu>, <li>. Ein Großbuchstabe zeigt dir sofort, dass ein Tag eine Komponente ist und kein HTML-Element. Und er zeigt es auch Vue: Für <MenueEintrag /> verwendet Vue die Komponente, die <script setup> unter diesem Namen importiert hat. Ein kleingeschriebener Tag wie <menueeintrag /> ist ein anderer Name. Vue findet keine Komponente dieses Namens, und die Konsole meldet:

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

„Failed to resolve component“ heißt „Ich habe die Komponente nicht gefunden“. (Die zweite Zeile betrifft Custom Elements, eine fortgeschrittene Funktion von HTML, du kannst sie überspringen.) Vue setzt dann ein leeres Element <menueeintrag> auf die Seite, das nichts anzeigt.

Dieselbe Warnung kommt, wenn du den Import vergisst: <MenueEintrag /> ohne import MenueEintrag from "./MenueEintrag.vue"; ergibt Failed to resolve component: MenueEintrag. Wenn eine Komponente nicht erscheint, schau also in die Konsole, dann prüfe ihren Import und wie ihr Name im Tag und im Import geschrieben ist.

Vue versteht noch eine Schreibweise: <menue-eintrag />, klein und mit Bindestrichen. Du siehst sie in älterem Code und in Tutorials. In diesem Kurs werden die Namen so geschrieben, wie die Dateien heißen, in PascalCase.