Ein Nuxt Mobile App von Grund auf mit Capacitor 8 erstellen

Einführung

Möchten Sie eine mobile App mit Nuxt von Grund auf erstellen? Diese Anleitung führt Sie durch das Erstellen eines brandneuen Nuxt 4-Projekts, das von Anfang an für Mobilgeräte konfiguriert ist, und das dann als native iOS- und Android-Apps verpackt wird mithilfe von Capacitor 8.

Am Ende dieser Anleitung haben Sie eine funktionierende mobile App, die auf Simulatoren läuft, die Sie weiterentwickeln und schließlich auf dem App Store und Google Play veröffentlichen können.

Zeitaufwand: ~30 Minuten

Was Sie bauen werden:

Ein neues Nuxt 4-Projekt mit der neuesten Verzeichnisstruktur
Statik-Generierungskonfiguration für Mobilgeräte
Capacitor 8 mit wichtigen Plugins
Native iOS- und Android-Anwendungen
Live-Reload-Entwicklungsumgebung

Sie haben bereits eine Nuxt-Anwendung? Überprüfen Sie Konvertieren Sie Ihre Nuxt-Anwendung in eine mobile Anwendung anstatt.

Voraussetzungen

Stellen Sie sicher, dass Sie diese installiert haben:

Node.js 18+ (prüfen Sie mit node --version)
Bun Paket-Manager (curl -fsSL https://bun.sh/install | bash)
Xcode (nur für macOS, für iOS-Entwicklung)
Android Studio (für Android-Entwicklung)

Schritt 1: Erstellen Sie ein neues Nuxt 4-Projekt

Beginnen Sie mit der Erstellung eines frischen Nuxt 4-Projekts:

bunx nuxi@latest init my-mobile-app
cd my-mobile-app
bun install

Nuxt 4-Verzeichnisstruktur

Nuxt 4 verwendet eine neue Verzeichnisstruktur mit app code im Verzeichnis: app/ directory:

my-mobile-app/
  app/
    assets/
    components/
    composables/
    layouts/
    middleware/
    pages/
    plugins/
    utils/
    app.vue
  public/
  server/
  nuxt.config.ts
  package.json

Diese Struktur bietet eine bessere Trennung zwischen App und Server code.

Schritt 2: Konfigurieren Sie Nuxt für statische Generierung

Capacitor erfordert statische HTML/JS/CSS-Dateien. Konfigurieren Sie Nuxt für statische Generierung in nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  // Enable static generation
  ssr: true,
  nitro: {
    preset: 'static',
  },
});

Schritt 3: Fügen Sie mobile Skripte hinzu

Aktualisieren Sie Ihr Projekt package.json mit mobilen Entwicklungs-Skripten:

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

Testen Sie die statische Generierung:

bun run generate

Sie sollten ein Verzeichnis mit Ihren statischen Dateien sehen. .output/public Schritt 4: Installieren Sie __CAPGO_KEEP_0__ 8

Installieren Sie die Capacitor-Core-Pakete:

Install the Capacitor core packages:

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

Installieren Sie __CAPGO_KEEP_0__ 8

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

Was diese Plugins tun:

@capacitor/app — Ereignisse im App-Lebenszyklus (Vordergrund/Hintergrund, tiefere Links)
@capacitor/keyboard — Tastaturverhalten steuern
@capacitor/splash-screen — Kontrolle über die native Splash-Screen
@capacitor/status-bar — Gestaltung des Geräte-Statusbalkens
@capacitor/preferences — Schlüssel-Wert-Speicherung (wie localStorage, aber native)

Schritt 5: Capacitor initialisieren

Initialisiere Capacitor mit deinen Projekt-Daten:

bunx cap init "My Mobile App" com.example.mymobileapp --web-dir .output/public

Ersetzen:

"My Mobile App" mit dem Namen deiner App
com.example.mymobileapp mit der App-ID (umgekehrte Domänennotation)

Dies erstellt capacitor.config.tsAktualisiere es mit Plugin-Konfiguration:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile 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;

Schritt 6: Füge Native-Plattformen hinzu

Installiere die Plattform-Pakete:

bun add @capacitor/ios @capacitor/android

Erstelle die native Projekte:

bunx cap add ios
bunx cap add android

Dies erstellt ios und android Verzeichnisse, die die native Projekte enthalten.

Schritt 7: Erstellen und Ausführen

Erstellen Sie Ihr Projekt und synchronisieren Sie es mit nativen Plattformen:

bun run mobile

In iOS Simulator öffnen:

bun run mobile:ios

Oder Android-Emulator:

bun run mobile:android

In Xcode (iOS):

Wählen Sie einen Simulator aus dem Geräte-Auswahldropdown
Klicken Sie auf die Play-Taste oder drücken Sie Cmd + R

In Android Studio:

Warten Sie, bis Gradle fertig ist, synchronisiert
Wählen Sie einen Emulator aus dem Geräte-Auswahldropdown
Klicken Sie auf die Run-Taste oder drücken Sie Shift + F10

Schritt 8: Live Reload einrichten

Für eine schnellere Entwicklung aktivieren Sie die Live-Reload-Funktion, damit Änderungen sofort auf Ihrem Gerät erscheinen.

Finden Sie Ihre lokale IP-Adresse:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

Erstellen Sie eine Entwicklungskonfiguration Capacitor. Aktualisieren capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const devConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... same plugin config
  },
};

const prodConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  plugins: {
    // ... same plugin config
  },
};

const config = process.env.NODE_ENV === 'development' ? devConfig : prodConfig;

export default config;

Starten Sie den Entwicklungs-Server und kopieren Sie die Konfiguration in die native Umgebung:

bun run dev &
NODE_ENV=development bunx cap copy

Rebuild in Xcode/Android Studio

Jetzt werden Änderungen an Ihrem Nuxt code auf dem Gerät mit Hot-Reload aktualisiert.

Schritt 9: Erstellen Sie Ihre erste mobile Bildschirmoberfläche

Lassen Sie uns eine mobile-freundliche Startseite erstellen. Aktualisieren app/app.vue:

<template>
  <NuxtPage />
</template>

Erstellen app/pages/index.vue:

<template>
  <main
    class="min-h-screen bg-linear-to-b from-green-500 to-green-700 flex flex-col items-center justify-center p-6 text-white"
  >
    <h1 class="text-4xl font-bold mb-4">My Mobile App</h1>
    <p class="text-xl mb-8 text-center opacity-90">
      Built with Nuxt 4 + Capacitor 8
    </p>

    <div v-if="appInfo" class="bg-white/20 rounded-lg p-4 backdrop-blur-sm mb-8">
      <p class="text-sm">
        {{ appInfo.name }} v{{ appInfo.version }}
      </p>
    </div>

    <div class="space-y-4 w-full max-w-sm">
      <button
        class="w-full py-4 px-6 bg-white text-green-600 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform"
        @click="handleGetStarted"
      >
        Get Started
      </button>
      <button
        class="w-full py-4 px-6 bg-white/20 text-white rounded-xl font-semibold text-lg backdrop-blur-sm active:scale-95 transition-transform"
        @click="handleShare"
      >
        Share App
      </button>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';

const appInfo = ref<{ name: string; version: string } | null>(null);

let backButtonListener: { remove: () => void } | null = null;

onMounted(async () => {
  // Get app info
  try {
    appInfo.value = await App.getInfo();
  } catch (e) {
    // Web fallback
    appInfo.value = { name: 'My Mobile App', version: '1.0.0' };
  }

  // Handle Android back button
  backButtonListener = await App.addListener('backButton', ({ canGoBack }) => {
    if (!canGoBack) {
      App.exitApp();
    } else {
      window.history.back();
    }
  });
});

onUnmounted(() => {
  backButtonListener?.remove();
});

function handleGetStarted() {
  // Navigate to onboarding or main app
  console.log('Get started clicked');
}

async function handleShare() {
  // We'll implement this with the Share plugin later
  console.log('Share clicked');
}
</script>

Schritt 10: Fügen Sie Tailwind CSS hinzu

Damit die Styling funktioniert, fügen Sie Tailwind CSS Ihrem Projekt hinzu:

bun add tailwindcss @tailwindcss/vite

Aktualisieren nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  ssr: true,
  nitro: {
    preset: 'static',
  },

  css: ['~/assets/css/main.css'],

  vite: {
    plugins: [tailwindcss()],
  },
});

Erstellen app/assets/css/main.css:

@import 'tailwindcss';

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Prevent text selection on mobile */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in inputs */
input,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

Implementieren wir nun die Funktion zum Teilen von Links:

bun add @capacitor/share

Aktualisieren app/pages/index.vue um das Teilen-Plugin zu verwenden:

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';
import { Share } from '@capacitor/share';

// ... existing code ...

async function handleShare() {
  try {
    await Share.share({
      title: 'Check out this app!',
      text: 'Built with Nuxt 4 and Capacitor 8',
      url: 'https://capacitorjs.com',
      dialogTitle: 'Share with friends',
    });
  } catch (e) {
    console.log('Share cancelled or failed:', e);
  }
}
</script>

Synchronisieren und neu aufbauen:

bun run mobile

Projektstruktur

Ihr Projekt sollte nun wie folgt aussehen:

my-mobile-app/
├── android/                  # Android native project
├── ios/                      # iOS native project
├── .output/
│   └── public/              # Static build output
├── app/
│   ├── assets/
│   │   └── css/
│   │       └── main.css
│   ├── pages/
│   │   └── index.vue
│   └── app.vue
├── capacitor.config.ts       # Capacitor configuration
├── nuxt.config.ts            # Nuxt configuration
├── package.json
└── ...

Nächste Schritte

Sie haben nun eine funktionierende Nuxt-Mobilanwendung. Hier sind die nächsten Schritte:

Wichtige Einrichtungen

App-Icons: Standard-Ikone ersetzen durch ios/App/App/Assets.xcassets und android/app/src/main/res
Splash Bildschirm: In native Projekten anpassen oder @capacitor/splash-screen config
Deep Links: URL-Schemata für Ihre App konfigurieren

Mehr Funktionen hinzufügen

Kamera: bun add @capacitor/camera
Standort: bun add @capacitor/geolocation
Push-Benachrichtigungen: bun add @capacitor/push-notifications
Dateisystem: bun add @capacitor/filesystem

Benutzerinterface-Erweiterung

Überlegen Sie, hinzuzufügen Konsta UI für native aussehende iOS/Android-Komponenten:

bun add konsta

Dann aktualisieren Sie Ihre CSS, um das Theme zu importieren:

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

Über-der-Luft-Updates

Einrichten Sie Capgo um Updates ohne Wiederabgabe im App-Store durchzuführen:

bunx @capgo/cli init

Fehlersuche

Build fehlschlägt mit „Cannot find module“ Ausführen Sie bun install und versuche es erneut.

iOS: „Kein Signierungsidentität gefunden“ Öffne Xcode, gehe zu Signierung und Fähigkeiten und wähle dein Entwicklerteam aus.

Android: „SDK-Ort nicht gefunden“ Erstelle android/local.properties mit sdk.dir=/path/to/android/sdk

Änderungen erscheinen nicht auf Gerät Stelle sicher, dass du bun run mobile nachdem du Änderungen vorgenommen hast. Für Live-Reload, überprüfe, ob die IP-Adresse korrekt ist und der Entwicklungs-Server läuft.

.output/public ist leer oder fehlt Stelle sicher, dass du nitro: { preset: 'static' } in nuxt.config.ts und ausführen bun run generate.

Ressourcen

Bereit, Ihre App zu verschicken? Lernen Sie, wie Capgo Ihnen dabei helfen kann, Updates schneller zu liefern — sich für ein kostenloses Konto anmelden heute.

Weitermachen von Build a Nuxt Mobile App von Grund auf mit Capacitor 8

Wenn Sie " Build a Nuxt Mobile App von Grund auf mit Capacitor 8 für die Planung der CI/CD-Automatisierung, verbinden Sie sie mit Capgo CI/CD für das Produktworkflow in Capgo CI/CD, Capgo Native Builds für das Produktworkflow in Capgo Native Builds, Capgo Integrations für das Produktworkflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Actions-Integration für die Implementierungsdetails in GitHub Actions-Integration.

Ein Nuxt-Mobil-App von Grund auf mit Capacitor 8 erstellen