Mit Vue und Capacitor mobile Apps erstellen

In diesem Tutorial werden wir Sie durch den Prozess der Umwandlung einer Vue-Web-Anwendung in eine native mobile App mit Capacitor führen. Sie können auch Capgo-Native-Navigation und -Übergänge hinzufügen, um einem native mobile Gefühl zu entsprechen, und tailwind-capacitor für sichere Bereiche verwenden.

Über Capacitor

Capacitor ist ein revolutionärer Werkzeug, das es Ihnen ermöglicht, es leicht in jedes Web-Projekt zu integrieren und Ihre Anwendung in eine native mobile App umzuwandeln. Es generiert native Xcode- und Android-Studio-Projekte für Sie und bietet Zugriff auf native Gerätefeatures wie die Kamera über eine JavaScript-Brücke.

Ihre Vue-Anwendung vorbereiten

Erstens erstellen Sie eine neue Vue-Anwendung, indem Sie den folgenden Befehl ausführen:

vue create my-app
cd my-app
npm install

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

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

Nachdem Sie den build Befehl ausgeführt haben, sollten Sie ein neues dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

hinzufügen

1. Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.

2. Installieren Sie das

3. Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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 nun neue iOS und Android Ordnen Sie das

__CAPGO_KEEP_0__.config.json capacitor.config.json Jetzt können Sie Ihr Vue-Projekt bauen und es mit __CAPGO_KEEP_0__ synchronisieren: Erstellen und Bereitstellen von nativen Apps iOS

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

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

Ordner in Ihrem Vue-Projekt.

To entwickeln Sie iOS-Apps, benötigen Sie Xcode installiert und für Android-Apps Android Studio installiert. Darüber hinaus müssen Sie sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden, um Ihre App im App Store zu verteilen.

Verwenden Sie die Capacitor CLI zum Öffnen beider native Projekte:

npx cap open ios
npx cap open android

Deployen Sie Ihre App auf einem verbundenen Gerät mithilfe von Android Studio oder Xcode.

Capacitor Live Reload

Aktivieren Sie das Live-Reload auf Ihrem Mobilgerät, indem die Capacitor-App den Inhalt von einer bestimmten URL auf Ihrem Netzwerk lädt.

Finden Sie Ihre lokale IP-Adresse und aktualisieren Sie das capacitor.config.ts Datei mit der richtigen IP-Adresse 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;

Anwenden Sie diese Änderungen, indem Sie sie in Ihr native Projekt kopieren:

npx cap copy

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

Mit Capacitor-Plugins

Installieren Sie ein Capacitor-Plugin, wie z.B. das Share-Plugin, und verwenden Sie es in Ihrer Vue-Anwendung:

npm i @capacitor/share

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

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

Nachdem Sie neue Plugins installiert haben, führen Sie den Befehl und deployen Sie die App auf Ihrem Gerät: sync Befehl und redeployen Sie die App auf Ihr Gerät:

npx cap sync

Als nächstes können Sie die App so anpassen, dass sie sich auf iOS und Android nativer anfühlt, indem Sie Capgo Navigation und Übergänge verwenden und häufige iOS-Anordnungsprobleme lösen, die zu horizontaler Überlauf oder gekürzten sicheren Bereichen führen.

Nativ anfühlen: UI mit Capgo Native Navigation und Übergängen

Ich habe in den letzten Jahren mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Vue ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

haben. Für einen nativen mobilen Look in einer Vue + Capacitor-App verwenden Sie stattdessen Capgo-Plugins anstatt web-only-UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — nativer Navbar, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Ihre Vue-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Seitenübergänge im Ionic-Stil und iOS-Rückblende am WebView-Schicht, ohne Ionic-Benutzeroberfläche zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalte die native Leisten respektiert:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Rendern Sie eine Liquid Glass-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-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') context

HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Mutter-Schlüssel `alternatives_cta_questions`). Seite/Bereich: Seite zur Vergleichsseite von Capacitor live-Updates. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite alternatives.astro. Erhalte Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen-CTA-Fragen). | HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Mutter-Schlüssel `appflow_cta_questions`). Seite/Bereich: Appflow-Vergleichsseite / Migration-Marketing-Text. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite ionic-appflow.astro. Erhalte Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau. Nachrichtenschlüssel `appflow_cta_questions` (Appflow-CTA-Fragen). | HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Mutter-Schlüssel `capwesome_cta_questions`). Seite/Bereich: Capawesome-Vergleichsseite. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite capwesome.astro. Erhalte Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | Seite/Bereich: Seite zur Consulting-Dienstleistungsseite. Rolle: Abschnittsunterschrift oder -Slogan. Gesehen in: Seite consulting.astro. Erhalte Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau. Nachrichtenschlüssel `consulting_faq_subtitle` (Consulting-Faq-Unterschrift). | Seite/Bereich: Appflow-Vergleichsseite / Migration-Marketing-Text. Rolle: Kurzer UI-Label oder Navigationspunkt. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite solutions/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow-Plugins-oder). Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergängen.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als Teil von __CAPGO_KEEP_0__ veröffentlicht). Es bietet tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

and src/assets/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

In pt-safe, pb-safeVerwendung nehmen Sie Hilfsmittel wie px-safe anstatt, es wie ein Sprühregen zu verteilen env(safe-area-inset-*) manuell. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Vue-Einrichtung fehlt, eröffnen Sie einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, hilft das Hinzufügen oder Anpassen des Viewport-Tags normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Fügen Sie die Viewport-Metatag in

innerhalb index.html Behandeln Sie das iOS-Safe-Area nur von einem Root-Wrapper aus <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort Safe-Area-Padding hinzu — nicht in mehreren verschachtelten Komponenten:

Umfasst alle Seite-Inhalte innerhalb

html,
body,
#app {
  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);
}

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird .app-shell. Doppeltes sicheres Bereichspuffer in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitor, kannst du denselben Puffer mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Hülle ausdrücken.

Setze Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzuge native Inset deaktiviert und lasse CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:

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

Mischung von Capacitor’s automatischem Inhaltsinset mit CSS env(safe-area-inset-*) Pufferung ist eine häufige Ursache für doppelte Abstände.

Finden Sie das überlaufende Element.

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

In Safari Web Inspector, ausführen Sie:

[...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, dupliziertem sicheren Bereich-Pufferung oder einem festen Breitencontainer — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Capacitor ist eine großartige Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts. Mit der Hinzufügung von Capgo ist es sogar einfacher, Live-Updates in Ihre App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

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

Fortsetzen Sie mit Building Mobile Apps mit Vue und Capacitor

Wenn Sie Building Mobile Apps mit Vue und __CAPGO_KEEP_0__ verwenden Building Mobile Apps with Vue and Capacitor Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten die Implementierungsdetails in @capgo/capacitor-live-aktivitäten, Verwenden Sie @capgo/capacitor-video-player Using @capgo/capacitor-video-player Für die native Fähigkeit in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player Für die Implementierungsdetail in @capgo/capacitor-video-player und Using @capgo/capacitor-native-navigation Für die native Fähigkeit in Using @capgo/capacitor-native-navigation.