Integration einer Nuxt 3 Anwendung in ein Shopware Template

Shopware 6 (German) Programmierung
1

Ich arbeite an einer Architektur, bei der eine Nuxt 3-Anwendung als Teil einer Shopware-Instanz verwendet werden soll. Die Nuxt-Anwendung wird als clientseitige Vue-App direkt im Shopware-Template eingebunden. Ein Nitro-Server stellt die dafür notwendigen Ressourcen bereit (app.js, app.css).

Zusätzlich wird der Nitro-Server als Abstraktionsschicht genutzt, um die Authentifizierung und Kommunikation mit der Shopware-API zu verwalten und entsprechende Routen bereitzustellen. Der Client kommuniziert ausschließlich über diesen Server, um sicherheitskritische Informationen wie Tokens zu schützen.

Die Client-Anwendung nutzt Shopware Composable Frontends, um sessionbasierte Informationen (z. B. Warenkorb- und Benutzerkontext) direkt in der App zu verwenden.

Bereitstellung der Ressourcen

  • Die generierten Dateien (app.js, app.css) der Nuxt-Anwendung werden auf dem Nitro-Server gehostet.
  • Im Shopware-Template wird die App als Vue-Anwendung (div-Container, JS + CSS) eingebunden.

Probleme

  • Zugriff auf Nuxt-spezifische Konfigurationen: Die app.js kann während der Laufzeit nicht auf die Nuxt-Konfiguration zugreifen (runtimeConfig, i18n-Locales, Nuxt-Module), da diese typischerweise zur Laufzeit vom Nitro-Server bereitgestellt werden. Funktionen wie i18n, dynamische Umgebungsvariablen (baseURL) oder andere Module sind dadurch eingeschränkt.
  • Integration von Shopware Composable Frontends: Da die Composables ebenfalls serverseitige Kontexte benötigen, stellt sich die Frage, wie diese im reinen SPA-Modus zuverlässig funktionieren können.

Fragen

  1. Wie kann ich die Nuxt-Konfiguration zur Laufzeit für die clientseitige Verwendung bereitstellen oder während des Builds statisch in die app.js einbetten, sodass sie unabhängig vom Nitro-Server nutzbar ist?
  2. Gibt es Best Practices, um eine Nuxt-App, die Teil eines größeren Systems wie Shopware ist, optimal in eine solche Architektur zu integrieren?
  3. Wie stelle ich sicher, dass Shopware Composable Frontends im clientseitigen Kontext korrekt funktionieren und auf die sessionbasierten Informationen zugreifen können?