Mobile Apps mit Vue und Capacitor erstellen

In diesem Tutorial führen wir Sie durch den Prozess der Umwandlung einer Vue-Webanwendung in eine native mobile App mit Capacitor. Optional können Sie Ihre mobile Benutzeroberfläche auch mit Konsta UI erweitern, einer auf Tailwind CSS basierenden mobilen UI-Bibliothek.

Über Capacitor

Capacitor ist ein bahnbrechendes Tool, das sich einfach in jedes Webprojekt integrieren lässt und Ihre Anwendung in eine native mobile App umwandelt. Es generiert native Xcode- und Android Studio-Projekte und ermöglicht den Zugriff auf native Gerätefunktionen wie die Kamera über eine JavaScript-Brücke.

Vorbereitung Ihrer Vue-App

Erstellen Sie zunächst eine neue Vue-App mit folgendem Befehl:

vue create my-app
cd my-app
npm install

Um Ihre Vue-App für die native mobile Bereitstellung vorzubereiten, müssen Sie Ihr Projekt exportieren. Fügen Sie ein Skript in Ihrer package.json-Datei hinzu, um das Vue-Projekt zu erstellen und zu kopieren:

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

Nach Ausführung des build-Befehls sollten Sie einen neuen dist-Ordner im Wurzelverzeichnis Ihres Projekts sehen. Dieser Ordner wird später von Capacitor verwendet.

Hinzufügen von Capacitor zu Ihrer Vue-App

Um Ihre Vue-Web-App in einen nativen mobilen Container umzuwandeln, folgen Sie diesen Schritten:

Installieren Sie die Capacitor CLI als Entwicklungsabhängigkeit und richten Sie sie in Ihrem Projekt ein. Akzeptieren Sie die Standardwerte für Name und Bundle-ID während der Einrichtung.
Installieren Sie das Core-Paket und die relevanten Pakete für die iOS- und Android-Plattformen.
Fügen Sie die Plattformen hinzu, und Capacitor erstellt Ordner für jede Plattform im Wurzelverzeichnis Ihres Projekts:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Sie sollten jetzt neue iOS- und android-Ordner in Ihrem Vue-Projekt sehen.

Aktualisieren Sie die capacitor.config.json-Datei, um das webDir auf das Ergebnis Ihres Build-Befehls zu verweisen:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Jetzt können Sie Ihr Vue-Projekt erstellen und mit Capacitor synchronisieren:

npm run build
npx cap sync

Native Apps erstellen und bereitstellen

Für die Entwicklung von iOS-Apps benötigen Sie Xcode und für Android-Apps Android Studio. Zusätzlich müssen Sie sich im Apple Developer Program für iOS und in der Google Play Console für Android registrieren, um Ihre App im App Store zu vertreiben.

Verwenden Sie die Capacitor CLI, um beide nativen Projekte zu öffnen:

npx cap open ios
npx cap open android

Stellen Sie Ihre App über Android Studio oder Xcode auf einem verbundenen Gerät bereit.

Capacitor Live Reload

Aktivieren Sie Live Reload auf Ihrem mobilen Gerät, indem Sie die Capacitor-App den Inhalt von einer bestimmten URL in Ihrem Netzwerk laden lassen.

Finden Sie Ihre lokale IP-Adresse und aktualisieren Sie die capacitor.config.ts-Datei mit der korrekten IP und Port:

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Übernehmen Sie diese Änderungen, indem Sie sie in Ihr natives Projekt kopieren:

npx cap copy

Jetzt wird Ihre App automatisch neu geladen und zeigt Änderungen an, wenn Sie Ihre Vue-App aktualisieren.

Verwendung von Capacitor Plugins

Installieren Sie ein Capacitor-Plugin, wie zum Beispiel das Share-Plugin, und verwenden Sie es in Ihrer Vue-App:

npm i @capacitor/share

Importieren Sie das Paket und rufen Sie die share()-Funktion in Ihrer App auf:

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

Nach der Installation neuer Plugins führen Sie den sync-Befehl aus und stellen die App erneut auf Ihrem Gerät bereit:

npx cap sync

Hinzufügen von Konsta UI

Um Konsta UI in Ihrer Vue-App zu verwenden, müssen Sie tailwind bereits installiert haben und das Paket installieren: Um Konsta UI in Ihrer Vue-App zu verwenden, installieren Sie das Paket und modifizieren Sie Ihre tailwind.config.js-Datei:

npm i konsta

Umschließen Sie Ihre App mit der App-Komponente in der pages/_app.vue-Datei und verwenden Sie Konsta UI Vue-Komponenten in Ihren Vue-Seiten.

Fazit

Capacitor ist eine großartige Option für die Entwicklung nativer Anwendungen auf Basis eines bestehenden Webprojekts. Mit der Ergänzung von Capgo ist es noch einfacher, Live-Updates zu Ihrer App hinzuzufügen und sicherzustellen, dass Ihre Nutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Erfahren Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu entwickeln, registrieren Sie sich noch heute für ein kostenloses Konto.