HA Widgets — Eigene Home-Assistant-Apps mit Vue 3 (Teil 1: Überblick)

Hinweis: Der Beitrag wurde mit KI-Unterstützung (Claude Code) verfasst und manuell nachbearbeitet. Alle beschriebenen Apps sind real im Einsatz.

HA Widgets — alle Teile: Teil 1: Überblick · Teil 2: Wie fängt man an? · Teil 3: Architektur · Teil 4: Architektur-Checks · Teil 5: HA-Infrastruktur · Teil 6: LCARS-Design

Home Assistant ist ein hervorragendes System. YAML hingegen — YAML Ain't My Language — ist es nicht. Irgendwann war der Punkt erreicht, an dem Lovelace-Konfiguration in YAML mehr Frust als Nutzen brachte: zu wenig Kontrolle über Layout und Logik, zu viel Herumgefummel mit Cards und Templates für Dinge, die als richtige Web-App trivial wären.

Also: drei eigene Web-Apps. Vue 3, TypeScript, HA WebSocket-API, iFrame im Dashboard. Eine für ein Wandtablet, eine fürs Handy, eine für den Desktop.

Warum nicht einfach Lovelace?

Für einfache Dashboards — Sensoren anzeigen, Schalter betätigen — ist Lovelace ausreichend. Problematisch wird es bei komplexeren Anforderungen:

• Eigenes Layout jenseits der vorhandenen Card-Typen
• Workflows mit mehreren Schritten (Einkaufsliste pflegen, Rezepte mit Vorrats-Abgleich)
• Berechnungen und Logik, die in Jinja-Templates schnell unlesbar werden
• Ein komplett eigenes Design — LCARS aus Star Trek geht in YAML nur mit Verrenkungen

Als Entwickler war die Alternative klar. Die eigentliche Hürde: TypeScript und Vue sind nicht wirklich meine Freunde — Backend und Systeme sind mein Alltag, kein Frontend. Dazu aber gleich mehr.

Grundprinzip

Jede App ist eine Vue-3-SPA, gebaut mit Vite und TypeScript:

• vite build erzeugt statische Dateien (HTML, JS, CSS)
• Ein Build-Script kopiert sie per SCP auf den HA-Server nach /config/www/
• Home Assistant liefert sie als statische Dateien aus (/local/tablet/ usw.)
• Im Dashboard eingebunden per iFrame-Card

HA läuft per Docker Compose auf einer Linux-Maschine. Entwickelt und gebaut wird auf einem Windows-PC in der WSL-Shell.

Die drei Apps

Tablet — LCARS (Star Trek)

Hängt als Always-on-Display an der Wand. Design nach dem LCARS-Interface aus Star Trek — Bögen, farbige Balken, das charakteristische Layout.

Views, nach Raumschiff-Abteilungen benannt:

• Brücke — Uhr, Wetter, Systemstatus, Timer, Personen-Standorte
• Technik — Lichter, Klimaanlage, PC (Wake-on-LAN)
• Versorgung — Vorratsverwaltung mit Kategorie-Navigation
• Kantine — Rezeptbuch mit Vorrats-Abgleich und Timer
• Replikator — KI-Rezeptgenerator: Zutaten auswählen, Claude schlägt ein Gericht vor

Handy — Material Design 3

Für unterwegs: kompakt, touch-optimiert, Material-3-Dark-Theme. Einkaufsliste, Vorrat, Rezepte, Gerätesteuerung, Personen-Standorte via Companion-App und Nominatim-Reverse-Geocoding.

Desktop — Verwaltung

Für alles, was auf dem Tablet zu fummelig wäre: Rezepte anlegen und bearbeiten (Zutaten, Mengen, kcal-Berechnung), Lagerverwaltung (Kategorien, Artikel, Nährwerte), Einkaufsliste.

Gemeinsame Basis

Alle drei Apps nutzen ein gemeinsames shared/-npm-Paket (npm Workspace) mit Composables, TypeScript-Typen und API-Konfiguration. Einmal geschrieben, dreimal nutzbar.

Features die alle drei teilen:

• WebSocket-Verbindung zu HA — Live-Updates für Sensoren, Schalter, Timer
• HA Custom Component — eigene WebSocket-API-Befehle für Datenzugriff und KI, direkt in HA integriert
• Einkaufsliste über HA Todo-Entity — auf allen Geräten synchron
• Vorratskatalog mit 200+ Artikeln, Kategorien und Nährwerten
• Rezeptbuch mit Zutatenliste, automatischem Vorrats-Abgleich und kcal-Berechnung
• KI-Integration — Claude generiert Rezeptvorschläge aus vorhandenen Zutaten
• Inter-App-Kommunikation über HA Custom Events (Desktop kann dem Tablet sagen: „zeig Rezept X an")

Entwickelt mit Claude Code

TypeScript und Frontend sind nicht mein Berufsalltag. Das Projekt entstand deshalb fast vollständig mit Claude Code — dem CLI-Tool von Anthropic für KI-gestütztes Entwickeln.

Kein „generier mir eine App" — eher Pair-Programming: Architektur besprechen, Code schreiben, debuggen, refactoren. Claude macht Vorschläge, ich entscheide und behalte den Überblick.

Zentral dabei: eine CLAUDE.md-Datei mit Coding-Regeln. Kein any in TypeScript, Logik in Composables statt in Views, alles Wiederverwendbare in shared/. Claude hält sich (meist...) daran — das Ergebnis ist konsistenter, wartbarer Code.

Details dazu in den folgenden Teilen.

Wie geht es weiter?

Teil 2 beschreibt den Einstieg: Claude Code einrichten und sinnvoll nutzen, erstes Vue-3-Projekt aufsetzen, als iFrame in HA einbinden und die erste WebSocket-Verbindung zu Home Assistant erstellen.

Fazit

• Drei Vue-3-Apps statt YAML-Dashboards: Tablet (LCARS), Handy (Material 3), Desktop (Verwaltung)
• Gemeinsame shared/-Library, WebSocket-API, Deployment per SCP
• HA läuft per Docker Compose; Entwicklung in der WSL-Shell
• Entwickelt mit Claude Code — Pair-Programming mit definierten Coding-Regeln