Crea un'app mobile con Vue e Capacitor

In this tutorial, we’ll guide you through the process of converting a Vue web application into a native mobile app using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

About Capacitor

Capacitor is a game-changing tool that allows you to easily integrate it into any web project and convert your application into a native mobile app. It generates native Xcode and Android Studio projects for you and provides access to native device features like the camera through a JavaScript bridge.

Preparazione dell'app Vue

Prima di tutto, crea una nuova app Vue eseguendo il seguente comando:

vue create my-app
cd my-app
npm install

Per preparare l'app Vue per la distribuzione mobile nativa, avrai bisogno di esportare il progetto. Aggiungi uno script nel tuo file package.json per costruire e copiare il progetto Vue:

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

Una volta eseguito il build comando, dovresti vedere una nuova dist cartella nel directory radice del tuo progetto. Questa cartella verrà utilizzata da Capacitor in seguito.

Aggiungere Capacitor al tuo App Vue

Per convertire il tuo app web Vue in un contenitore mobile nativo, segui questi passaggi:

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. Installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

3. Aggiungi le piattaforme e Capacitor creerà cartelle per ogni piattaforma nella radice del tuo progetto:

# 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

Ora dovresti vedere nuove iOS e android cartelle nel tuo progetto Vue.

Aggiorna il capacitor.config.json il file per puntare al webDir alla risultato del tuo comando di build:

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

Ora, puoi costruire il tuo progetto Vue e sincronizzarlo con Capacitor.

npm run build
npx cap sync

Costruire e Distribuire Applicazioni Nativhe

To develop iOS apps, you need Xcode installed, and for Android apps, you need Android Studio installed. Additionally, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android to distribute your app on the app store.

Usa i Capacitor CLI per aprire entrambi i progetti nativi:

npx cap open ios
npx cap open android

Deploya il tuo app su un dispositivo connesso utilizzando Android Studio o Xcode.

Capacitor Live Reload

Abilita il ricarica in tempo reale sul tuo dispositivo mobile avendo l'app Capacitor caricare il contenuto da una specifica URL del tuo network.

Trova l'indirizzo IP locale e aggiorna il capacitor.config.ts file with the correct IP and 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;

Applica queste modifiche copiandole nel tuo progetto nativo:

npx cap copy

Ora, la tua app si ricaricherà automaticamente e mostrerà le modifiche quando aggiorni la tua app Vue.

Utilizzare Plugin Capacitor

Installa un plugin Capacitor, come ad esempio il plugin di condivisione, e utilizzalo nel tuo'app Vue.

npm i @capacitor/share

Importa il pacchetto e chiama il share() funzione nella tua 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>

Esegui il comando `capgo update` sync Eseguire il comando e ripubblicare l'app sul tuo dispositivo:

npx cap sync

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Interfaccia utente con un aspetto nativo con Capgo Navigazione e Transizioni native

Il lavoro di anni con Ionic per costruire applicazioni cross-platform, ma integrarlo con Vue è un po' complicato e non vale la pena quando già hai Tailwind CSS.

Per un aspetto mobile nativo in un'app Vue + Capacitor, utilizza invece i plugin Capgo al posto di kit UI web come Konsta UI:

• @capgo/capacitor-navigazione nativa — barra di navigazione nativa, Liquid Glass bar delle schede su iOS e una barra delle schede sfocata su Android. Il tuo router Vue mantiene lo stato delle rotte; il plugin gestisce la barra di navigazione nativa.
• @capgo/capacitor-transizioni — Transizioni di pagina stile Ionic e swipe indietro su iOS nel layer WebView, senza adottare l'interfaccia utente di Ionic.

Installa entrambi:

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

Configura la navigazione nativa con modalità CSS inset per far rispettare il contenuto web le barre native:

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

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

Visualizza un pannello di navigazione Liquido Glass (iOS utilizza la rendering di sistema; Android utilizza un sfondo WebView sfocato):

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}`);
});

Aggiungi transizioni di pagina native nel tuo shell di app:

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

Avvolgi pagine di destinazione in cap-router-outlet, cap-page, e cap-content, e chiama setDirection('forward') o setDirection('back') Per aggiungere transizioni di pagina native nel tuo shell di app, utilizza

Vedi le guide complete: Usando @capgo/capacitor-navigazione nativa and Utilizzando @capgo/capacitor-transizioni.

Utilizzare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transizioni

Sono aree sicure con Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come) tailwind-capacitor su npm). Offre safe-areas utilità e altri plugin Tailwind compatibili con Capacitor:

bun add -D tailwind-capacitor

In src/assets/main.css:

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

Utilizza utilità come pt-safe, pb-safe, e px-safe invece di aggiungerle env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Vue, apri un PR su GitHub.

Risolvere problemi di layout iOS (Viewport, Area sicura, e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificando solo la riga viewport non risolve il problema. Esegui questi controlli in ordine.

Assicurati che la meta tag viewport sia applicata correttamente

Aggiungi la meta tag viewport in index.html all'interno <head>:

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

Gestisci l'area di sicurezza di iOS da un wrapper radice solo

Creare un unico contenitore dell'applicazione e applicare il padding dell'area di sicurezza lì — non in componenti nidificati multipli:

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);
}

Avvolgi tutto il contenuto della pagina all'interno .app-shellLa duplicazione dello spazio di sicurezza nelle intestazioni, nei modali e nei wrapper di layout può rendere l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo contenitore.

Configura Capacitor iOS contentInset su never primo

In capacitor.config.tspreferare l'inserzione nativa disabilitata e lasciare che CSS (o la navigazione nativa) contentInsetMode: 'css'Possiedere l'area di sicurezza

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

Miscellanea di Capacitor’s automatico contenuto di inserimento con CSS env(safe-area-inset-*) Trova l'elemento che sta veramente sovrapprendendo

Trova l'elemento sovrapposto reale

Il colpevole più comune è un elemento che utilizza 100vw, Tailwind w-screenuna larghezza fisso di pixel, o una grande min-width.

In Safari Web Inspector, esegui:

[...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,
  }));

Con Tailwind, sostituisci w-screen con w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screenpadding di area sicura duplicato, o da un contenitore di larghezza fissata — non dal tag meta del viewport stesso.

Conclusioni

Capacitor è una grande opzione per costruire applicazioni native basate su un progetto web esistente. Con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, garantendo che gli utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Learn how Capgo can help you build better apps faster, iscrivi il tuo account gratuito today.

Continua con Building Mobile Apps con Vue e Capacitor

Se stai utilizzando Costruire Applicazioni Mobili con Vue e Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Utilizzare @capgo/capacitor-attività-in-vivo per la capacità nativa in Utilizzare @capgo/capacitor-attività-in-vivo, @capgo/capacitor-attività-in-vivo per il dettaglio di implementazione in @capgo/capacitor-attività-in-vivo, Utilizzare @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-di-video, @capgo/capacitor-lettore-di-video per il dettaglio di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzare @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa.