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

Einführung

Haben Sie bereits eine Nuxt-Webanwendung? In dieser Anleitung lernen Sie, wie Sie sie in native iOS- und Android-Mobilanwendungen umwandeln können, indem Sie Capacitor 8 — die neueste Version mit verbessertem Leistung und neuen Funktionen.

Capacitor wraps your web app in a native container, giving you access to device APIs like camera, filesystem, and push notifications while keeping your existing Vue codebase. Unlike Flutter or React Native, you don’t need to rewrite anything — your Nuxt code runs as-is.

Wat werden Sie lernen:

Ihre bestehende Nuxt-Anwendung für statische Generierung konfigurieren
Add Capacitor 8 with essential native plugins
Auf iOS- und Android-Emulatoren bauen und testen
Für eine schnellere Entwicklung Live-Reload aktivieren
Gemeinsame iOS-Anzeigeprobleme (Viewport, sichere Fläche, horizontale Überlauf) beheben
Add native-feeling UI with Capgo Native Navigation and Transitions

Interessiert an einem neuen Projekt von Grund auf? Ein Nuxt-Mobil-App von Grund auf bauen.

Vorteile der Verwendung von Nuxt und Capacitor

Code-Reusabilität: Teilen Sie Ihre Vue-Komponenten und Logik zwischen Web- und Mobilanwendungen.
LeistungKontext: Startseite, Problem/Lösung Abschnitt. Rolle: Abschnitt oder Seiteüberschrift. Gesehen in: Seite premium-support.astro. Nachrichtsschlüssel `ps_help_performance_title` (Ps Help Performance Title).
: Nuxt’s statische Erzeugung erstellt optimierte Pakete, die perfekt für Mobilgeräte geeignet sind.: Access device features like camera, geolocation, and filesystem through Capacitor plugins.
: Zugriff auf Gerätefeatures wie Kamera, Geolocation und Dateisystem über __CAPGO_KEEP_0__-Plugins.Vereinfachte Entwicklung

: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Erlernen der nativen Entwicklung.

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

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

Konfigurieren Sie Ihre Nuxt-Anwendung für das Mobile

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 package.json hat die Generierungsskript:

{
  "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"
  }
}

Wichtig: Wenn Sie serverseitige Funktionen (z.B. API Routen, Server-Middleware usw.) verwenden, müssen Sie diese auf clientseitige Alternativen oder externe APIs umstellen.

Testen Sie die statische Generierung, indem Sie:

bun run generate

Sollten Sie ein .output/public Ordner mit Ihren statischen Dateien sehen. Dies ist, was Capacitor in Ihre native App einbündeln wird.

Capacitor 8 in Ihrem Projekt hinzufügen

Um Ihre Nuxt-App in einen native mobilen Container zu packen, folgen Sie diesen Schritten:

Installieren Sie Capacitor Core und CLI:

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

Installieren Sie die gängigen Capacitor-Plugins, die Sie benötigen:

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

Diese Plugins liefern wichtige Funktionen:

@capacitor/app: Lebenszyklusereignisse der App (Vordergrund/Hintergrund, tiefere Links behandeln)
@capacitor/keyboard: Tastaturverhalten auf Mobilgeräten steuern
@capacitor/splash-screen: Das native Splash-Screen verwalten
@capacitor/status-bar: Die Geräteleiste anpassen
@capacitor/preferences: 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 my-app mit Ihrem App-Namen und com.example.myapp mit Ihrer App-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;

Installieren Sie native Plattformen:

bun add @capacitor/ios @capacitor/android

Fügen Sie die native Plattform-Ordner hinzu:

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.

Ihr Projekt synchronisieren:

bun run mobile

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

Erstellung und Bereitstellung von nativen Apps

Um Ihre native mobile App zu erstellen und zu bereitstellen, folgen Sie bitte diesen Schritten:

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert zu haben, und für Android-Apps benötigen Sie Android Studio installiert zu haben. 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 nativen Projekte: Für iOS: Für Android: installed. Moreover, if you plan to distribute your app on the app store, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android.

Open the native projects:

For iOS:

bun run mobile:ios

For Android:

bun run mobile:android

Oder direkt mit Capacitor CLI:

bunx cap open ios
bunx cap open android

Die App erstellen und ausführen:

android-studio-run

In Android Studio wartet man auf das Projekt, und klickt dann auf den „Ausführen“-Button, um die App auf einem verbundenen Gerät oder Emulator zu deployen.

xcode-run

In Xcode stellt man sein Signierkonto ein, um die App auf einem realen Gerät zu deployen. Wenn man das noch nicht gemacht hat, wird Xcode einen durchgeführten Prozess anbieten (wobei man sich im Apple Developer Programm angemeldet haben muss). Sobald man das eingerichtet hat, klickt man auf den „Play“-Button, um die App auf dem verbundenen Gerät auszuführen.

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

Aber halt, 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 Live-Reloaden 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:

Auf macOS ausführen Sie folgenden Befehl im Terminal:
```
ipconfig getifaddr en0
```
Auf Windows ausfü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;

Ersetzen Sie 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 Befehl 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 rebuilden Sie in Xcode/Android Studio:

bun run dev

Now, whenever you make changes to your Nuxt app, the mobile app will automatically reload to reflect those changes.

Hinweis: Wenn Sie neue Plugins installieren oder Änderungen an native Dateien vornehmen, müssen Sie das native Projekt neu erstellen, da sich die lebendige Wiedergabe nur auf Web code-Änderungen bezieht.

Verwendung von Capacitor-Plugins

Capacitor-Plugins ermöglichen Ihnen, Zugriff auf native Gerätefeatures von Ihrem Nuxt-App zu erhalten. Lassen Sie uns sehen, 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 Neubau:

bunx cap sync

Erstellen Sie das Projekt neu und führen Sie die App auf Ihrem Gerät aus.

Now, 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-Anzeigefelder beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Jahre lang habe ich mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Nuxt ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

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

Für einen nativen mobilen Look in einer Nuxt + capgo-Anwendung verwenden Sie stattdessen capacitor-Plugins anstelle von web-only UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
@capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

Install beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit Webinhalte die native Balken respektieren:

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

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

Rendern Sie eine Glass-Liquid-Tasteleiste (iOS verwendet die Systemeigene Renderei; Android verwendet eine verschwommene WebView-Hintergrundtaste):

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 Seitenübergänge 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>

Verwenden Sie cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Über- und Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergängen arbeiten.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor veröffentlicht als tailwind-capacitor auf npm safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Nutzbarkeiten und andere __CAPGO_KEEP_0__-freundliche Tailwind-Plugins: app/assets/css/main.css:

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

In nuxt.config.ts.

Für Nuxt 4 mit Tailwind CSS 4, behalten Sie diese Import in dem CSS-File bei, das von pt-safe, pb-safeVerwenden Sie Nutzbarkeiten wie px-safe , und env(safe-area-inset-*) per Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Nuxt-Einrichtung fehlt, Öffnen Sie einen PR auf GitHub.

iOS-Bereichsprobleme beheben (Viewport, sichere Fläche und horizontale Überschuss)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar sind, hilft es oft nicht, nur den Viewport-Tag zu ändern. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

In

, setzen Sie den Viewport über nuxt.config.tsBehandeln Sie die sichere Fläche von iOS aus einer einzigen Root-Wrapper app.head:

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

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächenabstände an — nicht in mehreren verschachtelten Komponenten:

Umgeben Sie alle Seiteninhalte mit

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);
}

Zweifache sichere-Flächenabstände in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellFixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

With @capgo/tailwind-capacitor, Sie können denselben Rand mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS `contentInset` auf `never` erst

In capacitor.config.ts, bevorzugt native inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:

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

Mischen Sie Capacitor’s automatische Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.

Finde das überfließende Element

Der übliche Täter ist ein Element, das verwendet 100vw, Tailwind w-screen, einen fixen Pixelbreite oder eine große min-width.

In Safari Web Inspector, führe 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 ersetze w-screen mit w-full wenn möglich. Viele horizontale Überflussprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem fixbreiten Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Du hast erfolgreich deine bestehende Nuxt-Web-Anwendung in native iOS- und Android-Apps umgewandelt, indem du Capacitor 8 verwendet hast. Dein Vue-Codebase läuft nun nativ auf mobilen Geräten mit Zugriff auf Geräte-APIs.

Was du erreicht hast:

Nuxt für statische Generierung konfiguriert
Capacitor 8 mit wichtigen Plugins hinzugefügt
Für iOS- und Android-Simulator gebaut und bereitgestellt
Für Entwicklung live neu geladen
Gemeinsame iOS-Anordnungsprobleme (viewport, sichere Fläche, Überfluss) gelöst
Capgo Native Navigation und Transitions für eine natürliche Benutzeroberfläche hinzugefügt

Weitere Schritte:

Einstellungen Capgo für über das Internet erfolgende Updates ohne Wiederabgabe im App-Store
Mehr native Plugins wie Kamera, Geolocation oder Push-Benachrichtigungen hinzufügen
App-Ikone und Splash-Screens für die Produktion konfigurieren
Deine App vorstellen für die Einreichung bei App Store und Google Play

Neu bei einem Projekt? Überprüfe Ein Nuxt-Mobil-App von Grund auf aufbauen um eine Schritt-für-Schritt-Anleitung zu erhalten.

Ressourcen

Nuxt-Dokumentation
Capacitor 8 Dokumentation
--- @capgo/capacitor-native-Navigation --- Liquid Glass-Tastenleiste und nativer Chrome
--- @capgo/capacitor-Übergänge --- natürliche Seitenübergänge
--- @capgo/tailwind-capacitor – Sicherheitsbereiche von Tailwind für Capacitor
Capgo - Live-Updates für Capacitor-Apps

Erhalten Sie mit Capgo Unterstützung bei der Erstellung besserer Apps schneller registrieren Sie sich für ein kostenloses Konto heute

Fortsetzen Sie mit Convert Your Nuxt App zu iOS & Android mit Capacitor 8

Wenn Sie bereits Convert Your Nuxt App zu iOS & Android mit Capacitor 8 benutzen, um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo-Plugin-Verzeichnis zur Produktionsablauf in Capgo-Plugin-Verzeichnis Capacitor-Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins durch Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Ionische Unternehmens-Plugin-Alternativen zur Produktworkflow in Ionische Unternehmens-Plugin-Alternativen, und Capgo Native Builds zur Produktworkflow in Capgo Native Builds

Erstellen Sie mit Capacitor 8 eine native mobile App für iOS und Android

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Erlernen der nativen Entwicklung.

Konfigurieren Sie Ihre Nuxt-Anwendung für das Mobile

Capacitor 8 in Ihrem Projekt hinzufügen

Erstellung und Bereitstellung von nativen Apps

Capacitor Live Reload

Verwendung von Capacitor-Plugins

Nativ anfühlen mit Capgo-Native Navigation und -Übergängen

Sichere Bereiche mit Tailwind

iOS-Bereichsprobleme beheben (Viewport, sichere Fläche und horizontale Überschuss)

In

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächenabstände an — nicht in mehreren verschachtelten Komponenten:

Setzen Sie Capacitor iOS `contentInset` auf `never` erst

Finde das überfließende Element

Zusammenfassung

Ressourcen

Fortsetzen Sie mit Convert Your Nuxt App zu iOS & Android mit Capacitor 8

Erstellen Sie mit Capacitor 8 eine native mobile App für iOS und Android

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Erlernen der nativen Entwicklung.

Konfigurieren Sie Ihre Nuxt-Anwendung für das Mobile

Capacitor 8 in Ihrem Projekt hinzufügen

Erstellung und Bereitstellung von nativen Apps

Capacitor Live Reload

Verwendung von Capacitor-Plugins

Nativ anfühlen mit Capgo-Native Navigation und -Übergängen

Sichere Bereiche mit Tailwind

iOS-Bereichsprobleme beheben (Viewport, sichere Fläche und horizontale Überschuss)

In

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächenabstände an — nicht in mehreren verschachtelten Komponenten:

Setzen Sie Capacitor iOS contentInset auf never erst

Finde das überfließende Element

Zusammenfassung

Ressourcen

Fortsetzen Sie mit Convert Your Nuxt App zu iOS & Android mit Capacitor 8

Setzen Sie Capacitor iOS `contentInset` auf `never` erst