Ihre Nuxt-App auf iOS und 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 Capacitor 8 — die neueste Version mit verbesserten Leistungen und neuen Funktionen.

Capacitor umhüllt Ihre Web-Anwendung in einem nativen Container, wodurch Ihnen Zugriff auf Geräte- APIs wie Kamera, Dateisystem und Push-Benachrichtigungen gewährt wird, während Ihre bestehende Vue-Codebasis erhalten bleibt. Im Gegensatz zu Flutter oder React Native müssen Sie nichts umschreiben – Ihre Nuxt code läuft unverändert weiter.

Was Sie lernen werden:

Konfigurieren Sie Ihre bestehende Nuxt-Anwendung für statische Generierung
Fügen Sie Capacitor 8 mit wesentlichen nativen Plugins hinzu
Erstellen und testen Sie auf iOS- und Android-Emulatoren
Aktivieren Sie Live-Reload für eine schnellere Entwicklung
Optional fügen Sie Konsta UI für native aussehende Komponenten hinzu

Sind Sie an der Erstellung eines neuen Projekts von Grund auf interessiert? Überprüfen Sie unsere Anleitung zu Ein Nuxt-Mobilanwendung von Grund auf erstellen.

Vorteile der Verwendung von Nuxt und Capacitor

Code Reusability: Teilen Sie Ihre Vue-Komponenten und Logik zwischen Web- und Mobilanwendungen.
Leistung: Nuxt’s statische Generierung erstellt optimierte Bundles, die perfekt für mobile Geräte geeignet sind.
Nativfunktionen: Zugriff auf Gerätefeatures wie Kamera, Standort und Dateisystem über Capacitor-Plugins.
Einfachere Entwicklung: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Native-Entwicklungs-Lernen.

Voraussetzungen

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

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

Konfigurieren Sie Ihre Nuxt-Anwendung für Mobilgeräte

Schritt 1: Konfigurieren Sie Ihre Nuxt-Anwendung für statische Generierung. Capacitor benötigt statische HTML/JS/CSS-Dateien, um sie in die native App zu bündeln.

Stellen Sie sicher, dass Ihre package.json den generate-Skript enthält:

{
  "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 Folgendes ausführen:

bun run generate

Sie sollten ein Verzeichnis mit Ihren statischen Dateien sehen. Dies ist, was __CAPGO_KEEP_0__ in Ihre native App einbündeln wird. .output/public Dieses Verzeichnis enthält Ihre statischen Dateien. Capacitor wird diese in Ihre native App einbündeln.

Hinzufügen von Capacitor 8 zu Ihrem Projekt

Um Ihre Nuxt-App in einen nativen mobilen Container zu packen, folgen Sie bitte 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 wahrscheinlich benötigen:

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

Diese Plugins liefern wichtige Funktionen:

@capacitor/app: Steuern Sie Ereignisse des App-Lebenszyklus (Vordergrund/Hintergrund, tiefere Links)
@capacitor/keyboard: Kontrollieren Sie die Tastaturverhalten auf mobilen Geräten
@capacitor/splash-screen: Die native Splash-Screen verwalten
@capacitor/status-bar: Die Geräte-Status-Leiste stylen
@capacitor/preferences: Schlüssel-Wert-Speicher (wie localStorage, aber native)

Initialisiere Capacitor mit deinen Projekt-Daten:

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

Ersetze 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ügen Sie die native Plattform-Ordner hinzu:

bunx cap add ios
bunx cap add android

Capacitor wird erstellen ios und android Ordner am Root Ihres Projekts, die 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.

Bauen und synchronisieren Sie Ihr Projekt:

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 Ihre native mobile App zu erstellen und bereitzustellen, folgen Sie 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 beabsichtigen, Ihre App im App-Store zu verteilen, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Die native Projekte öffnen:

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

Die App erstellen und ausführen:

android-studio-run

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

xcode-run

In Xcode, richten Sie Ihr Signierungskonto ein, um die App auf einem echten Gerät bereitzustellen. Wenn Sie dies noch nicht getan haben, wird Ihnen Xcode durch den Prozess geführt (beachten Sie, dass Sie sich im Apple Developer Programm anmelden müssen). Sobald Sie eingerichtet haben, klicken Sie auf die Taste "Play", um die App auf Ihrem verbundenen Gerät auszuführen.

Herzlichen 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 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 auf Ihre 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 YOUR_IP_ADDRESS mit Ihrer lokalen IP-Adresse (z.B. 192.168.1.100).

Die Änderungen an Ihrem native Projekt anwenden:

bunx cap copy

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

Starten Sie Ihren Nuxt Dev-Server und rebuilden Sie in Xcode/Android Studio:

bun run dev

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

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

Mit Capacitor-Plugins

Capacitor-Plugins ermöglichen Ihnen, Zugriff auf native Gerätefeatures von Ihrer Nuxt App zu erhalten. Lassen Sie uns herausfinden, wie man sie verwendet. Plugin teilen zum Beispiel:

Installieren Sie das Plugin "Teilen":

bun add @capacitor/share

Erstellen oder aktualisieren Sie eine Seite, um das Plugin "Teilen" 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

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

Jetzt, wenn Sie auf den "Jetzt teilen!"-Button klicken, erscheint das native Teilen-Dialog.

Hinzufügen von Konsta UI v5 mit Tailwind CSS 4

Um den Button mobilerfreundlicher zu machen, können Sie Konsta UI für native aussehende iOS- und Android-Komponenten hinzufügen.

Sie benötigen Tailwind CSS 4 ist bereits installiert.

Installieren Sie die erforderlichen Pakete:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Konfigurieren Sie das Vite-Plugin in nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

Erstellen app/assets/css/main.css:

@import 'tailwindcss';
@import 'konsta/theme.css';

Um Ihren App mit der Konsta UI zu umhüllen App Komponente in app/app.vue:

<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Aktualisieren Sie Ihre Seite, um Konsta UI-Komponenten zu verwenden:

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>

Fügen Sie die Roboto-Schriftart für das Material-Design-Thema hinzu in nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

Ihre Nuxt-App sollte jetzt eine nativ aussehende mobile UI haben:

Fazit

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

Was Sie erreicht haben:

Konfiguriert Nuxt für statische Generierung
Hinzugefügt Capacitor 8 mit wesentlichen Plugins
Bau und Bereitstellung auf iOS- und Android-Emulatoren
Aktiviert Live-Neustart für Entwicklung
Optionale Hinzufügung von Konsta UI für native aussehende Komponenten

Nächste Schritte:

Einrichten Capgo für über das Internet erfolgende 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

Ein neues Projekt starten? Ein Nuxt Mobile App von Grund auf bauen um einen geführten Leitfaden zu erhalten.

Ressourcen

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

Ihr Nuxt-App auf iOS und Android mit Capacitor 8 umwandeln