Ihre Nuxt-App auf iOS & Android mit Capacitor 8 umwandeln

Einführung

Haben Sie eine bestehende Nuxt-Webanwendung? In diesem Leitfaden erfahren Sie, wie Sie sie in native iOS- und Android-Mobilanwendungen umwandeln können, indem Sie __CAPGO_KEEP_0__ verwenden Capacitor 8 — die neueste Version mit verbesserten Leistungen und neuen Funktionen.

Capacitor umhüllt Ihre Web-App in einem nativen Container, der Ihnen Zugriff auf Geräte- APIs wie Kamera, Dateisystem und Push-Benachrichtigungen bietet, während Ihre bestehende Vue-Codebasis erhalten bleibt. Im Gegensatz zu Flutter oder React Native müssen Sie nichts umschreiben – Ihr Nuxt code läuft wie gewohnt.

Was Sie lernen werden:

Konfigurieren Sie Ihre bestehende Nuxt-App für statische Generierung
Fügen Sie Capacitor 8 mit wesentlichen nativen Plugins hinzu
Erstellen und testen Sie auf iOS- und Android-Simulatoren
Aktivieren Sie die Live-Reload-Funktion für eine schnellere Entwicklung
Lösen Sie häufige iOS-Ansichtsprobleme (Viewport, sichere Fläche, horizontale Überlauf)
Fügen Sie natürliche Anzeigen mit Capgo Native Navigation und Transitions hinzu

Planen Sie ein neues Projekt von Grund auf? Überprüfen Sie unsere Anleitung zu Building a Nuxt Mobile App from Scratch.

Vorteile der Verwendung von Nuxt und Capacitor

Code Reusability: Teilen Sie Ihre Vue-Komponenten und Logik zwischen Web- und Mobilanwendungen.
Leistung: Nuxt erstellt durch statische Generierung optimierte Pakete, die perfekt für Mobilgeräte geeignet sind.
Native Funktionen: Zugreifen Sie über Capacitor-Plugins auf Gerätefunktionen wie Kamera, Geolocation und Dateisystem.
Vereinfachte Entwicklung: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Lernen von nativer Entwicklung.

Voraussetzungen

: Stellen Sie sicher, dass Sie vor Beginn folgende Anforderungen erfüllen:

Node.js 18+ : installiert
: Ein bestehendes Nuxt 4 Anwendung
Xcode (für iOS-Entwicklung, nur macOS)
Android Studio (für Android-Entwicklung)

Konfiguration Ihrer Nuxt-Anwendung für Mobilgeräte

Der erste Schritt besteht darin, Ihre Nuxt-Anwendung für die statische Generierung zu konfigurieren. Capacitor benötigt statische HTML/JS/CSS-Dateien, um sie in die native App zu packen.

Stellen Sie sicher, dass Ihre package.json context

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

HTML-Textfragment aus einem längeren Capgo-UI-String (Übergeordneter Schlüssel `solutions_cordova_to_capacitor_ai_step2_body`). Seite/Bereich: Capgo-Lösungen-Marketingseite. Rolle: Website-Kopfsatz. Gesehen in: Seite solutions/cordova-to-capacitor-ai.astro. Nachrichtenschlüssel `solutions_cordova_to_capacitor_ai_step2_body` (Lösungen Cordova To Capacitor Ai Step2 Body). If you’re using server-side features (API routes, server middleware, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Testen Sie die statische Erzeugung, indem Sie Folgendes ausführen:

bun run generate

Sie sollten ein Verzeichnis mit Ihren statischen Dateien sehen. Dies ist das, was __CAPGO_KEEP_0__ in Ihre native App einbündeln wird. .output/public Hinzufügen von Capacitor 8 zu Ihrem Projekt

Adding Capacitor 8 to Your Project

Installieren Sie __CAPGO_KEEP_0__ Core und __CAPGO_KEEP_1__:

Install Capacitor core and CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

Install common Capacitor plugins you’ll likely need:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

@__CAPGO_KEEP_0__/app

@capacitor/app@__CAPGO_KEEP_0__/keyboard
@capacitor/keyboardTest the static generation by running: ist nicht übersetzt, da es sich um einen Befehl handelt. Die übrigen Texte wurden übersetzt.
@capacitor/Splashbildschirm: Verwalten Sie das native Splashbildschirm
@capacitor/Statusleiste: Stilen Sie die Geräte-Statusleiste
@capacitor/Einstellungen: Schlüssel-Wert-Speicherung (wie localStorage, aber native)

Initialisieren Sie Capacitor mit Ihren Projekt-Daten:

bunx cap init my-app com.example.myapp --web-dir .output/public

Ersetzen Sie my-app mit Ihrem Anwendungsnamen und com.example.myapp mit Ihrer Anwendungs-ID (umgekehrte Domänennotation).

Erstellen oder aktualisieren Sie das capacitor.config.ts Datei mit der richtigen Konfiguration:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

Install native Plattformen:

bun add @capacitor/ios @capacitor/android

Die native Plattform-Ordner hinzufügen:

bunx cap add ios
bunx cap add android

Capacitor erstellt ios und android Ordner am Root Ihres Projekts, die native Projekte enthalten.

Um das Android-Projekt zu bauen, benötigen Sie Android Studio. Für iOS benötigen Sie einen Mac mit Xcode.

Das Projekt bauen und synchronisieren:

bun run mobile

Dies läuft Ihren benutzerdefinierten Skript aus, das die statische Nuxt-Build erzeugt und die Dateien mit den native Plattformen synchronisiert.

Erstellung und Bereitstellung von native Apps

Um ein natives Mobilgerät zu erstellen und zu deployen, folgen Sie diesen Schritten:

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Öffnen Sie die native Projekte:

Für iOS:

bun run mobile:ios

Für Android:

bun run mobile:android

Oder direkt mit Capacitor CLI:

bunx cap open ios
bunx cap open android

Bauen und ausführen Sie die App:

android-studio-run

In Android Studio wartet auf die Projektbereitschaft und klicken Sie dann auf die "Ausführen"-Schaltfläche, um die App auf einem verbundenen Gerät oder einem Emulator bereitzustellen.

xcode-run

In Xcode konfigurieren Sie Ihr Signierungskonto, um die App auf einem echten Gerät bereitzustellen. Wenn Sie dies noch nicht getan haben, wird Xcode Sie durch den Prozess führen (beachten Sie, dass Sie sich im Apple Developer Programm angemeldet haben müssen). Sobald Sie eingerichtet sind, klicken Sie auf die "Spiel"-Schaltfläche, um die App auf Ihrem verbundenen Gerät auszuführen.

Glückwunsch! Sie haben Ihre Nuxt-Web-App erfolgreich auf einem mobilen Gerät bereitgestellt.

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Während der Entwicklung können Sie von der Live-Neustartfunktion profitieren, um Änderungen sofort auf Ihrem mobilen Gerät zu sehen. Um diese Funktion zu aktivieren, folgen Sie diesen Schritten:

Finden Sie Ihre lokale IP-Adresse:

Bei macOS führen Sie den folgenden Befehl im Terminal aus:
```
ipconfig getifaddr en0
```
Bei Windows führen Sie:
```
ipconfig
```
Suchen Sie nach der IPv4-Adresse in der Ausgabe.

aktualisieren Sie Ihre capacitor.config.ts um auf Ihren Entwicklungsserver zu zeigen:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

Ersatz YOUR_IP_ADDRESS mit Ihrer lokalen IP-Adresse (z.B. 192.168.1.100).

Anwenden Sie die Änderungen an Ihrem nativen Projekt:

bunx cap copy

Die copy Kommando kopiert das Web-Ordner und die Konfigurationsänderungen in das native Projekt ohne das gesamte Projekt zu aktualisieren.

Starten Sie Ihren Nuxt-Entwicklungs-Server und erneuern Sie in Xcode/Android Studio:

bun run dev

Jetzt werden alle Änderungen an Ihrer Nuxt-Anwendung automatisch neu geladen, um diese Änderungen zu spiegeln.

Hinweis: Wenn Sie neue Plugins installieren oder Änderungen an nativen Dateien vornehmen, müssen Sie das native Projekt neu erstellen, da die Live-Neuladung nur auf Web-code-Änderungen angewendet wird.

Verwendung von Capacitor-Plugins

Capacitor Plugins ermöglichen Ihnen, Zugriff auf native Gerätefeatures aus Ihrer Nuxt-Anwendung zu erhalten. Lassen Sie uns herausfinden, wie Sie das Teilen-Plugin als Beispiel verwenden:

Installieren Sie das Teilen-Plugin:

bun add @capacitor/share

Erstellen oder aktualisieren Sie eine Seite, um das Teilen-Plugin zu verwenden. In Nuxt 4 gehen Seiten in app/pages/:

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>

Synchronisieren Sie die Änderungen mit dem native Projekt:

bun run mobile

Oder synchronisieren Sie ohne Wiederverwendung:

bunx cap sync

Wiederverwenden und auf Ihrem Gerät ausführen.

Jetzt, wenn Sie auf den Button „Jetzt teilen!“ klicken, erscheint das native Teilen-Dialogfeld.

Als Nächstes können Sie die App auf iOS und Android mit Capgo Navigation und Übergängen noch nativer anfühlen lassen und häufige iOS-Anzeigeprobleme beheben, die zu horizontaler Überfluss oder gekürzten sicheren Bereichen führen.

Ich habe bereits seit Jahren mit ionic um eine Plattform-Anwendung zu erstellen, aber die Integration mit Nuxt ist umständlich und selten wertvoll, wenn Sie bereits Tailwind CSS haben Tailwind CSS.

For a native mobile feel in a Nuxt + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@capgo/capacitor-native-navigation — nativere Navigation, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Der Nuxt-Router behält die Routenstatus; das Plugin besitzt die native Chrome.
@capgo/capacitor-transitions — Ionic-Style-Seitenumbrüche und iOS-Rückwärts-Schub auf der WebView-Ebene, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit web-Content die native Balken respektiert:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Rendern Sie eine verschwommene Liquid Glass-Tastenleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrund):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Fügen Sie native-Seitenumbrüche in Ihrem App-Shell hinzu:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

Wie Sie die gerouteten Seiten einhüllen müssen cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Über- und -Unterkopf nicht, wenn native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (veröffentlicht als) tailwind-capacitor auf npm). Es bietet safe-areas Utilitäten und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In app/assets/css/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Für Nuxt 4 mit Tailwind CSS 4, behalten Sie diese Import in dem CSS-File bei, das von nuxt.config.ts.

Verwenden Sie Utilitäten wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Nuxt-Konfiguration fehlt, einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr overflow-x: hidden oder das Anpassen der Viewport-Tags allein reicht normalerweise nicht aus. Arbeiten Sie durch diese Überprüfungen in der Reihenfolge.

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

In nuxt.config.ts, setzen Sie die Viewport über app.head:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
        },
      ],
    },
  },
});

Behandeln Sie das iOS-Sicherheitsbereich aus einer einzigen Root-Wrapper

Erstellen Sie eine einzelne App-Shell und fügen Sie dort Sicherheitsbereich-Puffer an — nicht in mehreren verschachtelten Komponenten:

html,
body,
#__nuxt {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Umgeben Sie alle Seiteninhalte mit .app-shell. Doppelte Sicherheitsbereich-Puffer in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus.

Mit @capgo/tailwind-capacitor, können Sie denselben Puffer mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzigen Hülle ausdrücken.

Set Capacitor iOS `contentInset` bis `never` erst

In capacitor.config.ts, bevor Sie native Einstellungen deaktivieren und CSS (oder Native Navigation) die sichere Bereiche übernehmen lassen: contentInsetMode: 'css'Mischen Sie __CAPGO_KEEP_0__’s automatische Inhalts-Einstellungen mit CSS-Paddings

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  ios: {
    contentInset: 'never',
  },
};

Mischen Sie Capacitor’s automatische Inhalts-Einstellungen mit CSS-Paddings env(safe-area-inset-*) Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das

, Tailwind 100vw, eine feste Pixelbreite oder eine große w-screen, a fixed pixel width, or a large min-width.

In Safari Web Inspector, führen Sie Folgendes aus:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Mit Tailwind ersetzen Sie w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, duplizierter sicheren Bereich-Padding oder einem festsitzenden Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Sie haben erfolgreich Ihre bestehende Nuxt-Web-Anwendung in native iOS- und Android-Apps umgewandelt, indem Sie Capacitor 8 verwendet haben. Ihr Vue-Codebase läuft nun nativ auf mobilen Geräten mit Zugriff auf Geräte-APIs.

Wat haben Sie erreicht:

Konfiguriert Nuxt für statische Erstellung
Hinzugefügt Capacitor 8 mit wesentlichen Plugins
Erstellt und bereitgestellt auf iOS- und Android-Emulatoren
Hat live Reload für die Entwicklung aktiviert
iOS-Layoutprobleme behoben (viewport, sichere Bereiche, Überfluss)
Native-UI hinzugefügt mit Capgo Native Navigation und Transitions

Zukünftige Schritte:

Einrichten Capgo zur Übertragung von Updates ohne Wiederabgabe im App-Store
Hinzufügen von weiteren nativen Plugins wie Kamera, Geolocation oder Push-Benachrichtigungen
Konfigurieren von App-Icons und Splash-Screens für die Produktion
Vorbereiten Ihrer App für die Einreichung bei App Store und Google Play

Erstellt ein neues Projekt? Überprüfen Sie Ein Nuxt-Mobil-App von Grund auf aufbauen zur Einführung.

Ressourcen

Nuxt-Dokumentation
Capacitor 8-Dokumentation
@capgo/capacitor-native-Navigation — Glasartige Liquid-Tastebar und native Chrome
@capgo/capacitor-Übergänge — Übergänge, die wie native Seiten anfühlen
@capgo/tailwind-capacitor — Tailwind-sichere-Bereiche für Capacitor
Capgo - Live-Updates für Capacitor-Apps

Erhalten Sie Informationen, wie Capgo Ihnen helfen kann, bessere Apps schneller zu bauen, indem Sie sich für ein kostenloses Konto anmelden Anmelden heute.

Fortsetzen Sie mit Capacitor 8 Ihre Nuxt-App auf iOS & Android umzustellen.

Wenn Sie __CAPGO_KEEP_0__ verwenden Um Ihre Nuxt-App auf iOS & Android umzustellen, verwenden Sie Capacitor 8 Um native Plugin-Arbeit zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ Capgo Plugin-Verzeichnis Capgo Plugin-Verzeichnis für den Produktworkflow Capacitor Plugins von Capgo Capacitor Plugins von Capgo für die Implementierungsdetails Hinzufügen oder Aktualisieren von Plugins Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails Ionische Enterprise-Plugin-Alternativen für das Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für das Produktworkflow in Capgo Native Builds.

Konvertieren Sie Ihre Nuxt-App in iOS- und Android-Anwendungen mit Capacitor 8

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

Voraussetzungen

Konfiguration Ihrer Nuxt-Anwendung für Mobilgeräte

Adding Capacitor 8 to Your Project

Erstellung und Bereitstellung von native Apps

Capacitor Live Reload

Verwendung von Capacitor-Plugins

Natürliche Benutzeroberfläche mit Capgo Native Navigation und Übergängen

Sichere Bereiche mit Tailwind

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Behandeln Sie das iOS-Sicherheitsbereich aus einer einzigen Root-Wrapper

Set Capacitor iOS `contentInset` bis `never` erst

Der übliche Täter ist ein Element, das

Zusammenfassung

Ressourcen

Fortsetzen Sie mit Capacitor 8 Ihre Nuxt-App auf iOS & Android umzustellen.

Konvertieren Sie Ihre Nuxt-App in iOS- und Android-Anwendungen mit Capacitor 8

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

Voraussetzungen

Konfiguration Ihrer Nuxt-Anwendung für Mobilgeräte

Adding Capacitor 8 to Your Project

Erstellung und Bereitstellung von native Apps

Capacitor Live Reload

Verwendung von Capacitor-Plugins

Natürliche Benutzeroberfläche mit Capgo Native Navigation und Übergängen

Sichere Bereiche mit Tailwind

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Behandeln Sie das iOS-Sicherheitsbereich aus einer einzigen Root-Wrapper

Set Capacitor iOS contentInset bis never erst

Der übliche Täter ist ein Element, das

Zusammenfassung

Ressourcen

Fortsetzen Sie mit Capacitor 8 Ihre Nuxt-App auf iOS & Android umzustellen.

Set Capacitor iOS `contentInset` bis `never` erst