Vue- oder Nuxt-App als Mobile App für iOS und Android

Welcher Nuxt-Modus läuft bei Ihnen?

Ein klassisches Vue-Projekt mit Vite besteht nach dem Build aus statischen Dateien. Nuxt rendert dagegen standardmäßig auf dem Server und bringt mit Nitro eigene API-Routen mit. Daraus ergibt sich die erste Weiche:

• Nutzen Sie Universal Rendering und /server/api, bleibt beim Wrapper alles, wie es ist.
• Läuft Nuxt mit ssr: false und nuxi generate, lässt sich .output/public direkt mit Capacitor bündeln.
• Wollen Sie bündeln, obwohl Serverrouten existieren, müssen diese als eigenes Backend weiterlaufen. Die App ruft sie dann über eine absolute Basis-URL aus runtimeConfig.public auf.

Wrapper: Ihre Nuxt-App bleibt, wie sie ist

Ein nativer Wrapper lädt die produktive Anwendung und ergänzt Push-Benachrichtigungen, Kamera- und Dateizugriff, Deep Links und einen Offline-Bildschirm. Neue Funktionen gehen mit jedem Web-Deployment live, ohne Store-Prüfung. Das passt gut zu Teams, die Nuxt für Kundenportale, Buchungsstrecken oder interne Werkzeuge einsetzen und keine zweite Codebasis aufbauen wollen.

Push-Benachrichtigungen laufen in der App über APNs und Firebase Cloud Messaging, nicht über Web Push. Die native Schicht übergibt das Geräte-Token an Ihre Nuxt-Anwendung, eine Nitro-Route speichert es pro Nutzer, und der Versand erfolgt serverseitig, etwa aus einem Job. Ergänzen Sie dabei Ihre Datenschutzerklärung um die beteiligten Dienste – das ist keine Rechtsberatung, aber ein häufig vergessener Punkt.

Capacitor und Ionic Vue: wann sich das lohnt

Capacitor packt die Web-Assets in ein iOS- und ein Android-Projekt und bindet Gerätefunktionen über Plugins an. Ionic Vue ergänzt Komponenten im Plattform-Stil und ion-router-outlet mit nativen Seitenübergängen und Wischgeste unter iOS. Sinnvoll ist das vor allem, wenn

• die App ohne Netz starten und zuletzt geladene Daten zeigen soll,
• Sie ohnehin neue, mobile-spezifische Screens planen,
• Sie Gerätefunktionen wie lokale Datenbank oder Hintergrund-Synchronisation brauchen.

Eine bestehende Oberfläche mit Vuetify oder Tailwind komplett auf Ionic-Seitenstrukturen umzustellen, ist dagegen Aufwand ohne direkten Nutzen. Viele Teams starten mit reinem Capacitor und setzen Ionic nur für neue Bereiche ein.

Routing: drei typische Fehler

1. Zurück führt zum Login. Nach der Anmeldung router.replace statt router.push verwenden, sonst landet die Zurück-Taste wieder im Formular.
2. Zurück schließt die App. Die Android-Zurück-Taste muss durch die Historie navigieren und die App erst auf der Startseite beenden. In Capacitor übernehmen Sie das selbst über das App-Plugin, ein guter Wrapper erledigt es nativ.
3. Weiße Seite nach Deep Link. Der History-Modus von Vue Router funktioniert im Wrapper, sofern Ihr Server auf index.html zurückfällt, und in der Regel auch mit Capacitor. Tritt beim Kaltstart über einen Link eine leere Seite auf, ist der Hash-Modus eine verlässliche Ausweichlösung.

Offline: was realistisch ist

Funklöcher auf dem Land, im Zug oder im Keller eines Kunden sind Alltag. Klären Sie deshalb, welche Stufe Ihre Nutzer wirklich brauchen:

• Stufe 1: ein verständlicher Offline-Hinweis mit automatischem Neuladen statt einer Browser-Fehlerseite.
• Stufe 2: zuletzt geladene Daten aus IndexedDB oder einem persistierten Pinia-Store, mit Zeitstempel. Unter Android funktionieren Service Worker in der Webview, unter iOS nur mit sogenannten App-Bound Domains – das sollte früh getestet werden.
• Stufe 3: Bearbeiten ohne Netz mit späterer Synchronisation und Konfliktbehandlung. Hier sind Capacitor mit lokaler Datenbank oder ein nativer Ansatz die bessere Basis.

So unterstützt jocapps

WebViewGold macht aus Ihrer Vue- oder Nuxt-Anwendung native iOS- und Android-Apps mit Push, Offline-Modus und mehr als 40 nativen APIs – als Einmalkauf und ohne Änderung am Rendering. Für Capacitor- und Ionic-Projekte, Offline-Synchronisation oder den Betrieb mit SLA steht unser Delivery-Team OnlineAppCreator bereit. Den Gesamtüberblick gibt der Leitfaden Website in eine App umwandeln.

Für eine kurze Einschätzung Ihres Setups vereinbaren Sie gern ein kostenloses Erstgespräch.