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

Capacitor umhüllt Ihre Webanwendung in einen nativen Container, der Ihnen Zugriff auf Geräte-APIs wie Kamera, Dateisystem und Push-Benachrichtigungen bietet, 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 wie gewohnt.

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 einem neuen Projekt von vorne an interessiert? Überprüfen Sie unsere Anleitung Ein Nuxt-Mobilanwendung von Grund auf aufbauen.

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 Pakete, die perfekt für Mobilgeräte geeignet sind.
Nativfunktionen: Zugriff auf Gerätefeatures wie Kamera, Geolocation und Dateisystem über Capacitor-Plugins.
Einfachere Entwicklung: Verwenden Sie bekannte Vue/Nuxt-Muster ohne das Erlernen der nativen Entwicklung.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie folgende 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

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 Ihre package.json Wenn Sie den generierenden Skript haben:

{
  "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 ( 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 Capacitor 8 zu Ihrem Projekt hinzufügen

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

Adding capacitor 8 to Your Project: Lebenszyklusereignisse der App (Vordergrund/Hintergrund, tiefere Links)
@capacitor/Tastatur: Steuere die Tastaturverhalten auf Mobilgeräten
@capacitor/Splash-Screen: Verwalte die native Splash-Screen
@capacitor/Status-Leiste: Stile die Geräte-Status-Leiste
@capacitor/Einstellungen: Schlüssel-Wert-Speicherung (wie localStorage, aber native)

Initialisiere Capacitor mit Ihren Projekt-Daten:

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

Ersetze my-app mit Ihrem App-Namen 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 Plattformordner hinzu:

bunx cap add ios
bunx cap add android

Capacitor wird Ordner erstellen 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 bauen und synchronisieren:

bun run mobile

Dies läuft Ihre benutzerdefinierte Skript, das die statische Nuxt-Build erstellt 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, müssen Sie Xcode installiert haben, und für Android-Apps müssen Sie Android Studio installiert haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich bei Apple Developer Program für iOS und Google Play Console für Android anmelden. Öffnen Sie die native Projekte: Für iOS: Für Android: Xcode

Android Studio

__CAPGO_KEEP_0__

bun run mobile:ios

__CAPGO_KEEP_0__

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 seine Signierungsanmeldung ein, um die App auf einem realen 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 angemeldet haben muss). Sobald man eingerichtet ist, klickt man auf den „Play“-Button, um die App auf dem verbundenen Gerät auszuführen.

Herzlichen 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 kann man von Live-Reloaden profitieren, um Änderungen sofort auf dem mobilen Gerät zu sehen. Um diese Funktion zu aktivieren, folgt man diesen Schritten:

Finden Sie Ihre lokale IP-Adresse:

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

Aktualisieren Sie Ihren capacitor.config.ts um auf Ihren Entwicklungsserver zu verweisen:

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 durch Ihre lokale IP-Adresse (z.B. 192.168.1.100).

Anwenden Sie die Änderungen an Ihrem native Projekt:

bunx cap copy

Der copy Befehl kopiert das Web-Verzeichnis und die Konfigurationsänderungen in das native Projekt ohne Aktualisierung des gesamten Projekts.

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

bun run dev

Jetzt werden Ihre Änderungen an der Nuxt-Anwendung 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 die Live-Überladung nur auf Web code-Änderungen angewendet wird.

Mit Capacitor-Plugins

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

bunx cap sync

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

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

Konsta UI v5 mit Tailwind CSS 4 hinzufügen

Um die Schaltfläche mobilerfreundlicher aussehen zu lassen, können Sie Konsta UI für native aussehende iOS- und Android-Komponenten hinzufügen.

Sie benötigen Tailwind CSS 4 bereits installiert zu haben.

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';

Ihre App mit Konsta UI umschließen App in app/app.vue:

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

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

Ihre Seite aktualisieren, 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>

Roboto-Schriftart für Material-Design-Thema hinzufügen 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 native aussehende mobile UI haben:

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äteeinblendungen.

Was Sie erreicht haben:

Nuxt für statische Generierung konfiguriert
Capacitor 8 mit wesentlichen Plugins hinzugefügt
Für iOS- und Android-Simulator gebaut und bereitgestellt
Live-Reload für die Entwicklung aktiviert
Optional Konsta UI für native aussehende Komponenten hinzugefügt

Nächste Schritte:

Einstellungen Capgo für über die Luft übertragene Updates ohne Wiederabgabe im App-Store
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 im App Store und Google Play

Starten Sie ein neues Projekt? Überprüfen Sie Erstellen Sie eine Nuxt Mobile App von Grund auf für eine geführte Durchführung.

Ressourcen

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

Bleiben Sie bei Convert Your Nuxt App to iOS & Android mit Capacitor 8

Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit Convert Your Nuxt App to iOS & Android mit Capacitor 8 Plugin-Verzeichnis von __CAPGO_KEEP_0__ für den Produktworkflow in Plugin-Verzeichnis von Capgo Plugins von Capgo von __CAPGO_KEEP_1__ für die Implementierungsdetails in Plugins von Capacitor von Capgo for the implementation detail in Capacitor Plugins by Capgo, Plugins von __CAPGO_KEEP_0__ von __CAPGO_KEEP_1__ für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, Ionic 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-Apps mit Capacitor 8