Nuxt3 mit Vuetify 3 – Teil 2: Layout

Wenn man durch eine App navigiert, dann ist der Seitenaufbau überall identisch. Das Menü, die Kopfzeile und Fusszeile sind auf jeder Seite identisch. Lediglich der Inhalt ändert sich.

In Nuxt 3 werden Layouts im „layouts“-Ordner erstellt und anschließend in die app.vue hinzugefügt. Einzelne Seiten werden im „pages“-Ordner erstellt.

Nuxt 3 routet die pages anhand des Namens. Nur die page „index.vue“ wird zum root Knoten geroutet.

Also erstellen wir ein Verzeichnis „layouts“ und ein Verzeichnis „pages“.

In das „layouts“ Verzeichnis, eine Datei erstellen „default.vue“.

und folgenden Inhalt kopieren:
[crayon-676777da6b650113204421/]
Dort, wo <slot /> steht, kommt der Inhalt der einzelnen Pages hinein.

Jetzt in das Verzeichnis „pages“

die Datei index.vue mit folgenden Inhalt
[crayon-676777da6b657329158598/]
und die Datei „pageOne.vue“ mit folgenden Inhalt erstellen
[crayon-676777da6b659759452564/]
In der app.vue müssen wir nun sagen, dass wir nicht mehr die Nuxt Welcome page sehen wollen, sondern unser Layout:
[crayon-676777da6b65a122905470/]