Themes & Projekte

Das Frontend von newmeta ist als Nuxt-Theme organisiert. Alle Themes liegen unter _theme/ und werden per Env-Variable ausgewaehlt. Diese Seite erklaert das Theme-Konzept, den Unterschied zwischen Themes und Projekten und zeigt die mitgelieferten Themes.

Was ist ein Theme?

Ein Theme ist ein vollstaendiges Nuxt-4-Projekt: eigene nuxt.config.ts, eigenes package.json, eigene app/-Struktur mit Components, Layouts, Pages, Plugins. Jedes Theme wird als eigenstaendiges Nuxt-Build kompiliert.

Der Core liefert zwei Themes mit:

Theme	Zweck
vue-base	Produktives Default-Theme mit vollem Feature-Umfang (Admin, Pagebuilder, Shop, E-Learning)
projekt01	Projekt-Fork fuer kundenspezifische Anpassungen

Daneben existieren zwei spezielle Ordner, die keine Nuxt-Themes sind:

Ordner	Inhalt
_theme/base/	Shared Komponenten-Bausteine (index/, menu/, pagebuilder/) — wird von Themes via Imports eingebunden
_theme/custom/	Kunden-Anpassungen (Plugin-Bootstrap, LESS/CSS/JS)
_theme/backend/	Backend-spezifisches Asset-Bundle (nicht renderndes Nuxt-Theme)

Nur vue-base/ und projekt01/ sind echte Nuxt-Themes mit package.json + nuxt.config.ts.

Theme vs. Projekt

In der Praxis werden die Begriffe oft vermischt. Die Unterscheidung:

• Theme = die technische Code-Struktur (Nuxt-Projekt mit Components, Layouts, Plugins, Styles)
• Projekt = der Kunden-spezifische Build, der ein Theme nutzt + eigene Design-Tokens + eigenes Logo + eigene Content-Struktur

Ein Projekt-Fork (projekt01/) kopiert typisch das vue-base/ als Ausgangspunkt und passt dann custom.less, Nuxt-Plugins und einzelne Komponenten kundenspezifisch an. Der Pagebuilder-Content selbst lebt nicht im Theme — der kommt aus der DB und wird zur Laufzeit gerendert.

Theme-Auswahl per NUXT_PUBLIC_THEME

Welches Theme aktiv ist, steuert die .env-Datei des Themes selbst:

# _theme/vue-base/.env
NUXT_PUBLIC_THEME=vue-base

Oder fuer ein Projekt-Fork:

# _theme/projekt01/.env
NUXT_PUBLIC_THEME=projekt01

Der Wert wird intern zur Auflosung von projektspezifischen Assets und Komponenten genutzt — beispielsweise laedt das Admin-CSS die richtigen projekt-Overrides, und der compiled_css-Endpoint fuer Menu-Editor-Styles liest das passende Theme-LESS.

Fuer den Dev-/Build-Prozess ist jeder Theme-Ordner ein eigenstaendiges Nuxt-Projekt mit eigenem npm install und npm run dev. Man aktiviert also nicht "im System" ein Theme, sondern startet das gewuenschte Theme-Verzeichnis.

Theme-Struktur auf einen Blick

_theme/
├── vue-base/                # Default-Theme (produktiv)
│   ├── app/                 # Nuxt App-Verzeichnis (components, layouts, pages, plugins, stores)
│   ├── public/              # Statische Assets, admin-CSS, fonts
│   ├── server/              # Nuxt Server-Handler
│   ├── nuxt.config.ts       # Nuxt-Konfiguration inkl. PurgeCSS-Safelist
│   ├── package.json
│   └── .env                 # Theme-spezifische Env-Variablen
│
├── projekt01/               # Projekt-Fork
│   ├── app/
│   ├── public/
│   ├── nuxt.config.ts
│   ├── package.json
│   └── deploy.sh
│
├── base/                    # Shared Bausteine (kein Nuxt-Theme!)
├── custom/                  # Kunden-Anpassungen
└── backend/                 # Backend-Asset-Bundle

Details: Theme-Struktur.

Wann ein neues Theme/Projekt anlegen?

Situation	Loesung
Ein einzelner Farbe/Font aendern	Design-Tokens via /admin/design (LESS-Editor) — kein neuer Theme
Logo, einzelne Komponenten anpassen	_theme/custom/-Ordner + Nuxt-Override
Komplett anderes Design-System	Neuer Projekt-Fork (_theme/projekt01-B/) als Kopie von vue-base
Komplett andere Content-Strukturen	Projekt-Fork mit eigener app/pages/-Struktur

Fuer die meisten Faelle reicht das Design-Token-System (custom.less via Admin-UI). Details: Design-Tokens.

Build & Deploy

Jedes Theme hat eigene Build-Befehle:

cd _theme/vue-base      # oder projekt01
npm install
npm run dev             # Entwicklung, localhost:3000
npm run build           # Produktion
npm run generate        # Statischer Build (SSG)
npm run preview         # Preview des Production-Builds

Details: Deployment.

Siehe auch

• Theme-Struktur — Ordner-Layout im Detail
• Environment-Variablen — alle Env-Variablen pro Theme
• Design-Tokens — LESS-Tokens + CSS-Variablen + Admin-UI
• Nuxt-Aliases — #extensions, #widgets/plugin-registry
• Deployment — Build, nginx, Update-Manager-Deployments
• Getting Started › Konfiguration — Basis-Setup