Frontend

Anforderungen

• Node.js >=22 (Node 24 empfohlen)
• npm >=10

Technologie-Stack

• Vite 8 – Build-Tool mit HMR
• Vue.js 3.5 – Interaktive Komponenten (TodoList, GallerySwiper, SwiperSlider)
• Bootstrap 5.3 – UI-Framework
• Sass 1.99 – CSS-Vorverarbeitung (Modern-Compiler-API)
• PostCSS – preset-env, pxtorem
• ESLint 10 / Stylelint 17 – Codequalität
• Swiper 12 – Touch-Slider (integriert über Vue-Komponenten)
• Jarallax 3 – Parallax-Scrolling

Schnellstart

cd Build
npm ci
npm run watch   # Auto-rebuild on file changes

In einem mpc-Monorepo mit laufendem DDEV kannst du auch vom Stammverzeichnis der Website aus bauen: ddev mp-core-build (entspricht npm run build innerhalb libs/mp-core/Build/).

Die Ausgabe erfolgt in Resources/Public/ (JavaScripts, StyleSheets, Fonts, Icons, Images, Favicons, BackendLayouts).

Build bereinigen: rm -rf node_modules Resources/Public && npm ci && npm run build

Projektstruktur

Build-Verzeichnis

Build/
├── Assets/
│   ├── Fonts/                  # Web fonts (WOFF2)
│   ├── Images/                 # Source images, Icons/
│   ├── Scripts/                # JavaScript/Vue
│   │   ├── code/               # Feature modules
│   │   │   ├── Utils/          # Shared utilities (domUtils.js, …)
│   │   │   ├── Vue/            # vue-initialisation.js (component registry)
│   │   │   └── Navigation/     # Primary / Secondary / Tertiary
│   │   └── components/         # Vue SFCs
│   ├── Scss/                   # SCSS (ITCSS layers)
│   │   ├── Base/               # Variables, fonts
│   │   ├── Elements/           # Base elements
│   │   ├── Mixins/             # SCSS mixins
│   │   ├── Modules/            # UI components
│   │   ├── Templates/          # Layout helpers
│   │   └── Extensions/         # TYPO3 extension overrides
│   └── Static/                 # Copied as-is (BackendLayouts, Favicons)
├── vite.config.js
├── eslint.config.js
├── stylelint.config.js
└── postcss.config.js

Ressourcenverzeichnis

Resources/
├── Private/                    # Fluid templates (not web-accessible)
│   ├── Backend/, Language/, Layouts/, Partials/, Templates/
├── Extensions/                 # Extension template overrides
│   ├── fluid_styled_content/, form/, indexed_search/, news/
└── Public/                     # Compiled assets (web-accessible)
    ├── Fonts/, Icons/, Images/, JavaScripts/, StyleSheets/, Favicons/

Vite-Einstiegspunkte

Definiert in Build/vite.config.js:

 

Hinweis: Swiper ist in das vue.js Bundle – es gibt keinen separaten swiper.js Einstiegspunkt.

 

Neuen Eintrag hinzufügen

1. Erstellen Sie eine JS-Datei in Build/Assets/Scripts/
2. Registrieren in vite.config.js
3. Ausführen npm run watch
4. In Fluid einbinden:

<f:asset.script identifier="myfeature" src="EXT:mp_core/Resources/Public/JavaScripts/myfeature.js" />
<f:asset.css identifier="myfeature" href="EXT:mp_core/Resources/Public/StyleSheets/myfeature.css" />

JavaScript-Architektur

Funktionsmodule (Build/Assets/Scripts/code/)

Kern: main.js, i18n.js, i18nLinkHelper.js

UI: jarallax.js, modalGallery.js, openAccordionAndTabs.js, pagination.js, sticky.js, totop.js

Navigation: nav-toggle.js, Navigation/Primary/navigation.js, Navigation/Secondary/navigation.js, Navigation/Tertiary/navigation.js

Layout: moveHeaderDate.js, moveMeta.js, theme.js

Gemeinsame Hilfsfunktionen (code/Utils/domUtils.js)

• debounce(func, wait) -- Leistungsoptimierte Handhabung von Größenanpassung und Bildlauf
• toggleNavState(...) -- Geöffneter/geschlossener Zustand der Navigation
• handleDropdownVisibility(element, showCb, hideCb) -- Bootstrap-Dropdown-Ereignisse
• toggleAriaLabelAndTitle(element, openLabel, closeLabel) -- Umschalten von barrierefreien Beschriftungen

Vue.js-Komponenten

Befindet sich in Build/Assets/Scripts/components/:

Die Komponentenregistrierung wird in code/Vue/vue-initialisation.js.

Vue-Mounts auf Elementen mit data-container="vue" und data-component="ComponentName" (siehe VueComponents.typoscript und Vorlagen für Inhaltselemente). Optionale data-* Attribute übergeben Props (z. B. data-card-title in TodoList).

Eine neue Komponente erstellen

1. Erstellen Sie .vue Datei in Build/Assets/Scripts/components/
2. Registrieren in code/Vue/vue-initialisation.js
3. Build erstellen und über <f:asset.script> in Fluid (der vue.js Einstiegspunkt mountet registrierte Komponenten automatisch).

SCSS-Architektur (ITCSS)

Ebenen von niedriger bis hoher Spezifität:

1. Einstellungen (Base/) -- Variablen, Schriftarten, Farbtabellen
2. Tools (Mixins/) -- Funktionen, Mixins (keine CSS-Ausgabe)
3. Allgemein -- Zurücksetzen, Normalisieren (aus Bootstrap)
4. Elemente (Elements/) -- Basis-HTML-Elemente
5. Objekte -- Layout-Muster
6. Komponenten (Modules/) – Gestaltete UI-Komponenten
7. Hilfsfunktionen -- Hilfsklassen

Bootstrap-Anpassung

• Helles Design: Build/Assets/Scss/Base/Bootstrap/_custom-variables.scss
• Dunkles Design: Build/Assets/Scss/Base/Bootstrap/_custom-variables-dark.scss

Asset-Verwaltung

Vorlagenintegration

Fluid

<f:asset.css identifier="screen" href="EXT:mp_core/Resources/Public/StyleSheets/screen.css" />
<f:asset.script identifier="screen" src="EXT:mp_core/Resources/Public/JavaScripts/screen.js" />

TypoScript

page {
  includeCSS.screen = EXT:mp_core/Resources/Public/StyleSheets/screen.css
  includeJSFooter.screen = EXT:mp_core/Resources/Public/JavaScripts/screen.js
}

Priorität der Vorlagenpfade: Höhere Zahlen haben Vorrang vor niedrigeren (0 = Kern, 10 = Erweiterung, 20+ = Projekt).

Ersetzungen durch Erweiterungen

Best Practices

JavaScript: Modularer Code in code/, gemeinsame Muster in Utils/, Debounce bei Größenänderung/Scrollen, Event-Delegation, ARIA-Labels, Lint vor dem Commit.

SCSS: ITCSS-Ebenen beachten, CSS-Variablen für das Theming, logische Eigenschaften für RTL, maximal 3 Verschachtelungsebenen, Mobile-First min-width Abfragen.

Vue.js: Single-File-Komponenten, bereichsbezogene Stile, Prop-Validierung, Composition API für komplexe Logik.

Fehlerbehebung

Wichtig: Niemals Resources/Public/ direkt. Bearbeite immer in Build/Assets/ und führen Sie npm run build.

Weiterführende Literatur

• Favicons -- Favicon-Assets und Fluid-Partial (nicht mit output.html)
• Konfiguration – Site Sets, TypoScript, TCA
• Vite | Vue.js | Bootstrap 5 | ITCSS