Die Arbeit beginnt
Ich hatte zwar zwischendurch verschiedene Features von Nuxt getestet und mit der Software experimentiert, aber jetzt war der Moment gekommen, konkrete Details in die Anwendung einzubauen.
Start mit einer einfachen Seite
Die erste Version sollte eine einfache Internetseite werden. Als Vorlage diente mir meine eigene Seite (dasay.de), die für mich erstellt wurde. So musste ich nicht alles neu gestalten und konnte mich am bestehenden Design orientieren. Farben, Abstände und die grundlegende Struktur habe ich übernommen und Schritt für Schritt angepasst. Später wird das Design noch verfeinert.
Struktur und Umsetzung
Im Fokus stand zunächst eine schlanke Struktur: eine Titelzeile mit Menü, ein Footer mit Kontaktdaten, eine Helden-Sektion als Einstieg und eine „Über mich“-Sektion. Für den Anfang völlig ausreichend.
Der erste Schritt war, alles in eine Seite zu bringen. Also das Original-HTML kopieren und Stück für Stück nachbauen. Irgendwo muss man schließlich beginnen.
Einstieg in TailwindCSS und DaisyUI
TailwindCSS ist sehr gut dokumentiert, sodass sich viele Probleme schnell lösen ließen. Die Unterstützung durch KI hat hier viel Zeit gespart – gerade, wenn man nur abends oder am Wochenende daran arbeiten kann.
Der erste Entwurf der Seite war schnell erstellt und ähnelte dem Original immer mehr. Ich war froh, eine Vorlage zu haben, an der ich mich orientieren konnte. Es sollte nicht exakt gleich aussehen, aber nah genug, um einen guten Einstieg zu haben. Ich wurde dabei unterstützt, wo es nötig war, und so entstand ein zufriedenstellender erster Stand.
Viele Komponenten habe ich direkt aus der DaisyUI-Dokumentation übernommen und mit TailwindCSS angepasst. Anfangs braucht es etwas Zeit, bis man sich an neue Frameworks gewöhnt, aber nach ein paar Stunden ging es schon deutlich schneller voran.
Arbeiten mit Nuxt Pages
Nuxt bringt ein praktisches Feature namens „Pages“ mit. Aktiviert man es, kann man .vue-Dateien in einem eigenen Verzeichnis ablegen und erhält automatisch einen konfigurierten Router. Das spart viel Zeit.
Es entstand zunächst eine Startseite mit Impressum und Datenschutzerklärung sowie jeweils eine Seite für die Lomi-Wirkenden.
Namen und Bereiche
Für die Bereiche habe ich mich an der hawaiianischen Sprache orientiert. Der Bereich für die Mitwirkenden heißt „Ohana“ (Gemeinschaft), während „Hoa“ den einzelnen Freund oder die einzelne Freundin bezeichnet.
Feinschliff: Impressum und Typography
Das Impressum und die Datenschutzerklärung waren zum Glück schon vorbereitet. Ich habe nur noch kleine Details angepasst.
Dabei fiel mir auf, dass ein eingebundenes HTML-Impressum oft nicht besonders gut aussieht. Die Lösung: das Plugin TailwindCSS Typography.
Nach der Installation stehen zusätzliche CSS-Klassen zur Verfügung, mit denen man Standard-HTML schöner darstellen kann. Einfach und effektiv.
Beispielsweise sieht das so aus:
<article
class="prose prose-p:text-sm prose-headings:text-primary prose-a:text-primary bg-base-200 p-10 pt-22 max-w-full"
>
<h1>Impressum</h1>
<h2>Dieser Service wird bereitgestellt von:</h2>
...
</article>
Heute konnte ich viel umsetzen, auch wenn es noch lange nicht so aussieht, wie ich es mir vorstelle.