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

Einführung

Besitzen 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 verbesserten Leistungen und neuen Funktionen.

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

Wat werden Sie lernen:

Konfigurieren Sie Ihre bestehende Nuxt-Anwendung für statische Generierung
Hinzufügen von Capacitor 8 mit wichtigen native Plugins
Erstellen und testen auf iOS- und Android-Emulatoren
Live-Reload aktivieren für schnellere Entwicklung
Verbessern Sie häufige iOS-Anordnungsprobleme (Viewport, sichere Fläche, horizontale Überlauf)
Fügen Sie eine native anfühlsende Benutzeroberfläche mit Capgo Native Navigation und Transitions hinzu

Planen Sie ein neues Projekt von Grund auf? Überprüfen Sie unsere Anleitung zu Erstellung einer mobilen Nuxt-App von Grund auf.

Vorteile der Verwendung von Nuxt und Capacitor

Code-Reusability: Teilen Sie Ihre Vue-Komponenten und Logik zwischen Web- und mobilen Anwendungen.
Leistung: Nuxt’s statische Erstellung erstellt optimierte Pakete, die perfekt für mobile Geräte geeignet sind.
Native Funktionen: Zugreifen Sie auf Gerätefeatures wie Kamera, Geolocation und Dateisystem über Capacitor-Plugins.
Verkürzte Entwicklung: Verwenden Sie bekannte Vue/Nuxt-Muster ohne native Entwicklung zu lernen.

Voraussetzungen

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

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

Konfiguration Ihrer Nuxt-App für Mobilgeräte

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

Stellen Sie sicher, dass Ihr Projekt package.json kontext: HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `solutions_cordova_to_capacitor_ai_step2_body`). Seite/Bereich: Capgo-Lösungen-Marketingseite. Rolle: Website-Text. 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).

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

hat den generate-Script: 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.

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

bun run generate

Testen Sie die statische Generierung, indem Sie Folgendes ausführen: .output/public folder with your static files. This is what Capacitor will bundle into your native app.

Ordner mit Ihren statischen Dateien sehen. Dies ist, was Capacitor in Ihre native App packen wird.

__CAPGO_KEEP_0__ 8 in Ihr Projekt hinzufügen

Um Ihre Nuxt-App in eine native mobile Container-App zu packen, folgen Sie diesen Schritten: Installieren Sie Capacitor Core und CLI:

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

Install 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: Verwalten Sie Ereignisse im App-Lebenzyklus (Vordergrund/Hintergrund, tiefere Links)
@capacitor/keyboard: Kontrollieren Sie die Tastaturverhalten auf dem Mobilgerät
@capacitor/splash-screen: Verwalten Sie die native Splash-Screen
@capacitor/status-bar: Stilen Sie die Geräte-Statusleiste
@capacitor/preferences: Schlüssel-Wert-Speicherung (wie localStorage, aber native)

Initialisiere Capacitor mit deinen Projekt-Daten:

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

Ersetzen my-app mit deinem App-Namen und com.example.myapp mit deiner App-ID (umgekehrte Domänennotation).

Erstelle oder aktualisiere 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;

Installiere native Plattformen:

bun add @capacitor/ios @capacitor/android

Füge die native Plattform-Ordner hinzu:

bunx cap add ios
bunx cap add android

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

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

Build und synchronisiere dein Projekt:

bun run mobile

Dies läuft deinen benutzerdefinierten 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 bereitstellen, folge bitte diesen Schritten:

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

Ö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

Erstellen und ausführen Sie die App:

android-studio-run

In Android Studio warten Sie, bis das Projekt bereit ist, und klicken Sie dann auf die Schaltfläche "Ausführen", um die App auf einem verbundenen Gerät oder einem Emulator zu deployen.

xcode-run

In Xcode stellen Sie Ihr Signierkonto ein, um die App auf einem echten Gerät zu deployen. Wenn Sie dies noch nicht getan haben, wird Xcode Ihnen durch den Prozess führen (beachten Sie, dass Sie sich im Apple Developer Programm anmelden müssen). Sobald Sie eingerichtet sind, klicken Sie auf die Schaltfläche "Abspielen", um die App auf Ihrem verbundenen Gerät auszuführen.

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

Finden Sie Ihre lokale IP-Adresse:

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

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 Kommando kopiert das Web-Ordner und 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

Jetzt werden Ihre Nuxt-Anwendung änderungen automatisch neu geladen, um diese Änderungen widerzuspiegeln.

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

Mit Capacitor-Plugins

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

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 einfach ohne Neubau:

bunx cap sync

Rebuild und führen Sie die App auf Ihrem Gerät aus.

Jetzt erscheint, wenn Sie auf den Button „Jetzt teilen!“ klicken, 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.

Ich habe in den letzten Jahren 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-Übergänge — Ionic-style-Seitenübergänge und iOS-Rück-Edge-Swipe in der WebView-Schicht, ohne Ionic-UI zu übernehmen.

Install beide:

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

Konfigurieren Sie 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 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') Beachten Sie die vollständigen Anleitungen:

context Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.

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 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-safeund px-safe anstatt, diese env(safe-area-inset-*) von Hand zu verteilen. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Nuxt-Konfiguration fehlt, einen PR auf GitHub öffnen.

Fixierung von iOS-Layoutproblemen (Viewport, Safe Area und horizontale Überschuss)

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, hilft es normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.

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

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 iOS-Safe-Area von einem einzigen Root-Wrapper nur

Erstellen Sie ein einzelnes App-Shell und wenden Sie dort Safe-Area-Padding 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);
}

Alle Inhalte auf der Seite einhüllen .app-shellDoppelte sichere Bereiche in Kopfzeilen, Modalen und Layout-Wrappern machen die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitorkann man denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Hülle ausdrücken.

Setze Capacitor iOS `contentInset` auf `never` erstes

In capacitor.config.ts, bevorzugte native Inset-Modus und lasse CSS (oder Native Navigation’s contentInsetMode: 'css')

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

Mischen Sie Capacitor’s automatische Inhaltsabstände mit CSS env(safe-area-inset-*) Ein häufiger Grund für doppelte Abstände ist die Padding-Einstellung.

Finden Sie das überlaufende Element

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

In Safari Web Inspector, führen Sie 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, duplizierten sicheren Bereichsabständen oder einem festsitzenden Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

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

Was Sie erreicht haben:

Konfiguriert Nuxt für statische Generierung
Hinzugefügt Capacitor 8 mit wesentlichen Plugins
Erstellt und bereitgestellt auf iOS- und Android-Simulatoren
Aktiviert Live-Reload für Entwicklung
Gelöst häufige iOS-Layoutprobleme (viewport, safe area, overflow)
Hinzugefügt native anfühlen UI mit Capgo Native Navigation und Transitions

Nächste Schritte:

Einstellungen Capgo für über-einzelne Updates ohne App-Store-Wiederabgabe
Fügen Sie weitere native Plugins wie Kamera, Geolocation oder Push-Benachrichtigungen hinzu
Konfigurieren Sie App-Ikone und Splash-Screens für die Produktion
Vorbereiten Sie Ihre App für die Einreichung bei App Store und Google Play

Neue Projektidee? Überprüfen Sie Erstellen Sie eine Nuxt-Mobil-App von Grund auf für eine umfassende Anleitung.

Ressourcen

Nuxt-Dokumentation
Capacitor 8 Dokumentation
@capgo/capacitor-native-Navigation — Liquid Glass-Tastenleiste und native Chrome
@capgo/capacitor-Übergänge --- nativ anfühlsame Seitenübergänge
@capgo/tailwind-capacitor --- Tailwind-Unterstützung für sichere Bereiche in Capacitor
Capgo - Live-Updates für Capacitor-Apps

Erhalten Sie Informationen darüber, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen Registrieren Sie sich für ein kostenloses Konto heute.

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

Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit dem __CAPGO_KEEP_0__ Plugin-Verzeichnis Convert Your Nuxt App zu iOS & Android mit Capacitor 8 Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit dem __CAPGO_KEEP_0__ Plugin-Verzeichnis Capgo für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds

Convert Your Nuxt App to iOS & Android with Capacitor 8

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

Voraussetzungen

Konfiguration Ihrer Nuxt-App für Mobilgeräte

Ordner mit Ihren statischen Dateien sehen. Dies ist, was Capacitor in Ihre native App packen wird.

Erstellung und Bereitstellung von nativen Apps

Capacitor Live Reload

Mit Capacitor-Plugins

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

Sichere Bereiche mit Tailwind

Fixierung von iOS-Layoutproblemen (Viewport, Safe Area und horizontale Überschuss)

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

Behandeln Sie iOS-Safe-Area von einem einzigen Root-Wrapper nur

Setze Capacitor iOS `contentInset` auf `never` erstes

Finden Sie das überlaufende Element

Zusammenfassung

Ressourcen

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

Convert Your Nuxt App to iOS &amp; Android with Capacitor 8

Einführung

Vorteile der Verwendung von Nuxt und Capacitor

Voraussetzungen

Konfiguration Ihrer Nuxt-App für Mobilgeräte

Ordner mit Ihren statischen Dateien sehen. Dies ist, was Capacitor in Ihre native App packen wird.

Erstellung und Bereitstellung von nativen Apps

Capacitor Live Reload

Mit Capacitor-Plugins

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

Sichere Bereiche mit Tailwind

Fixierung von iOS-Layoutproblemen (Viewport, Safe Area und horizontale Überschuss)

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

Behandeln Sie iOS-Safe-Area von einem einzigen Root-Wrapper nur

Setze Capacitor iOS contentInset auf never erstes

Finden Sie das überlaufende Element

Zusammenfassung

Ressourcen

Fortsetzen von Convert Your Nuxt App zu iOS &amp; Android mit Capacitor 8

Convert Your Nuxt App to iOS & Android with Capacitor 8

Setze Capacitor iOS `contentInset` auf `never` erstes

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