Import und Export

Jede Datei einer Vue-App ist ein Modul: ein Teil des Programms mit eigenen Variablen. Was ein Modul erzeugt, gibt es nur in diesem Modul, deshalb kann App.vue die Variablen einer anderen Datei nicht sehen. Eine Datei gibt einen Wert weiter, indem sie ihn exportiert, und die Datei, die den Wert braucht, importiert ihn. Import-Zeilen schreibst du seit der ersten Lektion. Hier siehst du, wie sie funktionieren.

Eine Datei kann einen Default-Export haben, ihren Hauptwert, geschrieben mit export default. Er wird ohne geschweifte Klammern importiert, unter einem Namen, den die importierende Datei wählt:

// cafe.js
const menue = [
    { id: 1, name: "Espresso", preis: 2 },
    { id: 2, name: "Cappuccino", preis: 3 },
];

export default menue;

// App.vue
import menue from "./cafe.js";

Eine Datei kann auch beliebig viele Werte unter ihrem Namen exportieren, mit export vor const. Diese benannten Exporte werden in geschweiften Klammern importiert, unter genau ihren Namen, durch Kommas getrennt:

// cafe.js
export const cafeName = "Café am Eck";
export const oeffnungszeiten = "7 bis 19 Uhr";

// App.vue
import { cafeName, oeffnungszeiten } from "./cafe.js";

Hat eine Datei beides, holt ein Import beides: zuerst den Default-Export, dann die benannten in Klammern, import menue, { cafeName } from "./cafe.js";. Klammern, wo keine hingehören, oder umgekehrt, sind ein häufiger Fehler: Der Import findet den Wert dann nicht, und die Seite zeigt an seiner Stelle nichts. (In einem Projekt auf deinem eigenen Computer bricht der Browser bei so einem Import stattdessen mit einem Fehler ab, dass die Datei „does not provide an export named …“.)

Jetzt kannst du jeden Import lesen, den du bisher gesehen hast:

• import { ref } from "vue"; importiert den benannten Export ref des Pakets vue. Ein Name ohne ./ ist ein Paket, eine im Projekt installierte Bibliothek.
• import App from "./App.vue"; in main.js importiert den Default-Export von App.vue: die Komponente.
• import "./style.css"; importiert nichts unter einem Namen. Es fügt der Seite nur das Stylesheet hinzu.

Aber wo ist der Export in App.vue? Du schreibst ihn nicht: <script setup> exportiert die Komponente für dich, als Default-Export der Datei. Deshalb hat import MenueEintrag from "./MenueEintrag.vue"; keine Klammern. Und in <script setup> darf es keine eigenen Exporte geben; die rote Leiste würde <script setup> cannot contain ES module exports. melden. Werte, die mehrere Komponenten brauchen, gehören in eine .js-Datei, wie hier cafe.js.

Und die Dateiendung? Vite, das Werkzeug, das Vue-Projekte auf deinem Computer ausführt, findet eine .js-Datei auch ohne sie, eine .vue-Datei aber nur mit ihr. Damit es einfach bleibt, schreibe sie in jeden Import deiner eigenen Dateien.