Konvertieren Sie Ihre Nuxt-Anwendung in iOS- und Android-Apps mit Capacitor 8

Einführung

Haben Sie bereits eine Nuxt-Webanwendung? In diesem Leitfaden erfahren 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.

Ihre Webanwendung in eine native Container einhüllt, wodurch Sie Zugriff auf Geräte-APIs wie Kamera, Dateisystem und Push-Benachrichtigungen erhalten, während Ihre bestehende Vue-Codebasis beibehalten wird. Im Gegensatz zu Flutter oder React Native müssen Sie nichts umschreiben — Ihre Nuxt-Anwendung läuft unverändert.

• Wat werden Sie lernen:
• Add Capacitor 8 with essential native plugins
• Hinzufügen Sie Capacitor 8 mit wichtigen native Plugins
• Erstellen und testen Sie auf iOS- und Android-Emulatoren
• Aktivieren Sie Live-Reload für eine schnellere Entwicklung
• 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.

Benefits of Using Nuxt and Capacitor

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

: Verwenden Sie bekannte Vue/Nuxt-Muster ohne native Entwicklung lernen zu müssen.

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

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

Ihre Nuxt-Anwendung für Mobilgeräte konfigurieren

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 bündeln.

Stellen Sie sicher, dass Ihr 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

Sie sollten ein .output/public Ordner mit Ihren statischen Dateien sehen. Dies ist, was Capacitor in Ihre native App einbinden wird.

Hinzufügen von Capacitor 8 zu Ihrem Projekt

Um Ihre Nuxt-Anwendung in eine native mobile Container zu packen, folgen Sie diesen Schritten:

1. Installieren Sie Capacitor Core und CLI:

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

2. Installieren Sie gängige Capacitor-Plugins, die Sie wahrscheinlich 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 verwalten)
• @capacitor/keyboard: Tastaturverhalten auf Mobilgeräten steuern
• @capacitor/splash-screen: Die native Splash-Screen verwalten
• @capacitor/status-bar: Die Gerätestatusleiste anpassen
• @capacitor/preferences: Schlüssel-Wert-Speicherung (wie localStorage, aber native)

3. Initialisiere Capacitor mit deinen 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).

4. 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;

5. Installieren Sie native Plattformen:

bun add @capacitor/ios @capacitor/android

6. Fügen Sie die native Plattform-Ordner hinzu:

bunx cap add ios
bunx cap add android

Capacitor wird die ios und android context

Page/area: Capgo Marketing-Website. Rolle: Kurzbeschriftung oder Navigationspunkt. Gesehen in: Seite trust.astro. Nachrichtsschlüssel `and` (Und). Ordner am Root Ihres Projekts, die die native Projekte enthalten.Um das Android-Projekt zu bauen, benötigen Sie ein Android Studio. Für iOS benötigen Sie einen Mac mit Xcode.

7. Deine Projektdateien synchronisieren:

bun run mobile

Dies führt deine benutzerdefinierte Skript aus, das die statische Nuxt-Build und die Dateien mit den nativen Plattformen synchronisiert.

Erstellung und Bereitstellung von nativen Apps

Um deine native mobile App zu erstellen und zu verteilen, folge bitte diesen Schritten:

Um iOS-Apps zu entwickeln, benötigst du Xcode installiert, und für Android-Apps benötigst du Android Studio installiert. Darüber hinaus benötigst du, wenn du deine App im App Store verteilen möchtest, eine Mitgliedschaft im Apple Developer Programm für iOS und im Google Play Console für Android.

1. Öffne die nativen Projekte:

Für iOS:

bun run mobile:ios

For Android:

bun run mobile:android

Oder direkt mit Capacitor CLI:

bunx cap open ios
bunx cap open android

2. Die App erstellen und ausführen:

• In Android Studio wartet man auf das Projekt, und klickt dann auf die Schaltfläche "Ausführen", um die App auf einem verbundenen Gerät oder Emulator zu deployen.

• In Xcode stellt man sein Signierkonto ein, um die App auf einem echten Gerät zu deployen. Wenn man dies noch nicht gemacht hat, wird Xcode durch den Prozess geführt (beachten Sie, dass man sich im Apple Developer Programm anmelden muss). Sobald man eingerichtet ist, klickt man auf die Schaltfläche "Spiel" um die App auf einem verbundenen Gerät auszuführen.

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

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 Live-Reloaden profitieren, um Änderungen sofort auf Ihrem mobilen Gerät zu sehen. Um diese Funktion zu aktivieren, folgen Sie diesen Schritten:

1. 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.

2. Aktualisieren Sie Ihre capacitor.config.ts zum Punkt auf Ihrem Entwicklungsserver:

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).

3. 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 Aktualisierung des gesamten Projekts.

4. 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 man das Teilen-Plugin als Beispiel verwendet:

1. Installieren Sie das Teilen-Plugin:

bun add @capacitor/share

2. 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>

3. Synchronisieren Sie die Änderungen mit dem native Projekt:

bun run mobile

Oder synchronisieren Sie ohne Neuerstellung:

bunx cap sync

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

Natürlicher Anwendungsdesign mit Capgo-Native-Navigation und -Übergängen

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.

besitzen. Für einen nativen mobilen Look in einer Nuxt + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-only-UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — native Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Der Nuxt-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Ionic-Style-Seiteneinblendungen und iOS-Rück-Edge-Swipe im WebView-Schicht, ohne Ionic-UI zu übernehmen.

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 Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen 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 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>

Wrap routed Pages in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor dem Navigieren. Duplizieren Sie Web-Über- oder 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.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als) tailwind-capacitor auf npm). Es bietet safe-areas Nutzen Sie Hilfsmittel 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 der CSS-Datei bei, die von nuxt.config.ts.

Verwenden Sie Hilfsmittel wie pt-safe, pb-safe, und px-safe anstatt sie zu verteilen env(safe-area-inset-*) von 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 Überschreitung)

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

Stellen Sie sicher, dass die Viewport-Meta-Tags korrekt angewendet werden

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

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

Behandeln Sie die sichere Fläche von iOS aus einer einzigen Root-Wrapper

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächenabstände 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);
}

Verwenden Sie alle Seiteninhalte innerhalb von .app-shellDoppelte sichere-Flächenabstände in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus.

With @capgo/tailwind-capacitor, Sie können denselben Abstand 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-*) abstand ist eine häufige Ursache für doppelten Abstand.

Finde das tatsächlich überschüssige 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 Überlaufprobleme 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-Webanwendung 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äteeingaben.

Was du erreicht hast:

• Konfiguriert Nuxt für statische Generierung
• Hinzugefügt Capacitor 8 mit wesentlichen Plugins
• Erstellt und bereitgestellt auf iOS- und Android-Emulatoren
• Aktiviert Live-Reload für Entwicklung
• Gelöst häufige iOS-Anzeigeprobleme (Viewport, Safe Area, Overflow)
• Hinzugefügt eine native anfühlsende Benutzeroberfläche 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
• Deine App vorbereiten für die Einreichung bei App Store und Google Play

Neu an einem Projekt beginnen? Überprüfe Ein Nuxt-Mobil-App von Grund auf bauen 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-transitions --- natürliche Seitenübergänge
• --- @capgo/tailwind-capacitor — Tailwind sichere-Bereich-Hilfsfunktionen für Capacitor
• Capgo - Live-Updates für Capacitor-Apps

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

Weitermachen von Convert Your Nuxt App zu iOS & Android mit Capacitor 8

Wenn Sie Convert Your Nuxt App zu iOS & Android mit Capacitor 8 für die Planung von nativen Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo Für die Implementierungsdetails in Capacitor Plugins von Capgo Plugins hinzufügen oder aktualisieren Für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionische Unternehmens-Plugin-Alternativen Für das Produktworkflow in Ionische Unternehmens-Plugin-Alternativen und Capgo Native Builds Für das Produktworkflow in Capgo Native Builds.