Creare App Mobili 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.

Su Capacitor

Capacitor è uno strumento rivoluzionario che consente di integrarlo facilmente in qualsiasi progetto web e convertire l'applicazione in un'app mobile nativa. Genera progetti Xcode e Android Studio nativi per te e fornisce accesso alle funzionalità del dispositivo nativo come la fotocamera attraverso un ponte JavaScript.

Preparazione dell'app Vue

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

vue create my-app
cd my-app
npm install

Per preparare la tua app Vue per la distribuzione mobile nativa, avrai bisogno di esportare il tuo progetto. Aggiungi uno script nel tuo file file dopo aver eseguito il

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

comando, dovresti vedere una nuova build cartella nella directory radice del tuo progetto. Questa cartella verrà utilizzata da in seguito. dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

Installa il come dipendenza di sviluppo e configuralo nel tuo progetto. Accetta i valori predefiniti per nome e ID bundle durante la configurazione.

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. Aggiungi le piattaforme, e creerà cartelle per ogni piattaforma nella directory radice del tuo progetto:

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

Ora dovresti vedere nuove iOS e Android cartelle

Aggiorna il file capacitor.config.json a puntare al risultato del tuo comando di build: Ora, puoi costruire il tuo progetto Vue e sincronizzarlo con __CAPGO_KEEP_0__: Costruisci e distribuisci applicazioni native

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

file

To sviluppare app iOS, hai bisogno di Xcode installato, e per le app Android, hai bisogno di Android Studio installato. Inoltre, hai bisogno di iscriverti al Apple Developer Program per iOS e al Google Play Console per Android per distribuire la tua app sul negozio di app.

Usa i Capacitor CLI per aprire entrambi i progetti nativi:

npx cap open ios
npx cap open android

Deploy la tua app su un dispositivo connesso utilizzando Android Studio o Xcode.

Capacitor Live Reload

Abilita il live reload sul tuo dispositivo mobile avendo l'app Capacitor caricare il contenuto da una specifica URL del tuo network.

Trovare l'indirizzo IP locale e aggiornare il capacitor.config.ts file con l'indirizzo IP e il port corretto:

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 questi cambiamenti copiando i file nel tuo progetto nativo:

npx cap copy

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

Utilizzando Capacitor Plugins

Installa un plugin Capacitor, come ad esempio il plugin di condivisione, e utilizzalo nella tua 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>

Dopo l'installazione di nuovi plugin, esegui il sync e ripubblica l'app sul tuo dispositivo:

npx cap sync

Successivamente, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni Capgo e risolvere i problemi di layout comuni di iOS che causano un sovraccarico orizzontale o aree sicure tagliate.

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

Lavoro da anni con Ionic per costruire applicazioni cross-platform, ma integrarla con Vue è un processo hacky e raramente vale la pena quando già hai Tailwind CSS.

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

• @capgo/capacitor-native-navigation --- navbar nativa, Liquid Glass bar delle schede su iOS e uno stile di barra delle schede sfocata su Android. Il tuo router Vue mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
• transizioni @capgo/capacitor — Transizioni di pagina simili a Ionic e swipe-back di iOS nell' layer WebView, senza adottare l'interfaccia utente di Ionic.

Installate sia:

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

Configura la navigazione nativa con il modello 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',
  },
});

Rendere una barra di tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo di 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 contenitore dell'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 le pagine di destinazione in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') vedi le guide complete:

Prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede queste superfici. Utilizzando @capgo/capacitor-navigazione nativa e Utilizzando @capgo/capacitor-transizioni.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizzare @capgo/tailwind-capacitor Pubblicato su tailwind-capacitor @npm safe-areas Fornisce 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";

Utilizzare utilità come pt-safe, pb-safe, e px-safe al posto di spargere env(safe-area-inset-*) di mano in mano. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Vue, apri un PR su GitHub.

Risolvere Problemi di Layout iOS (Viewport, Area di Sicurezza e Sovraffollamento Orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o regolare il tag viewport da solo di solito non risolve il problema. Lavora attraverso questi controlli in ordine.

Assicurati che il tag meta viewport sia applicato correttamente

Aggiungi il tag meta 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 solo wrapper radice

Creare un unico contenitore dell'applicazione e applicare la spaziatura di sicurezza dell'area là — non in più componenti nidificati:

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-shell. La duplicazione dello spazio di sicurezza dell'area sicura nei capisaldi, nelle finestre modali e nei contenitori di layout può rendere l'interfaccia utente appiattita o troppo grande.

Con @capgo/tailwind-capacitor, puoi esprimere lo stesso spazio di padding con utilità come pt-safe pb-safe px-safe su quel singolo shell.

Imposta Capacitor iOS contentInset su never context: Pagina/Area: Pagina prodotti con aggiornamenti in tempo reale. Ruolo: Etichetta breve dell'interfaccia utente o elemento di navigazione. Chiave del messaggio `live_update_dynamic_label_to` (Etichetta dinamica di aggiornamento in tempo reale per).

primo capacitor.config.tsIn contentInsetMode: 'css', preferisci l'inserzione nativa disabilitata e lascia che CSS (o la navigazione nativa)

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) La spaziatura è una causa comune di doppia spaziatura.

Trovare l'elemento che effettivamente sta sovrapponendosi.

Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza in pixel fissata, o un contenitore di larghezza molto 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-screen, sovrapposizione di padding di area sicura duplicata, o da un contenitore di larghezza fissata — non dal tag meta 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, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Scopri come Capgo può aiutarti a creare applicazioni migliori in modo più veloce, iscrivi un account gratuito oggi.

Continua da Costruire Applicazioni Mobili con Vue e Capacitor

Se stai utilizzando Costruire Applicazioni Mobili con Vue e Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, collegalo con Utilizzare @capgo/capacitor-live-attività per la capacità nativa in Utilizzare @capgo/capacitor-live-attività @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzare @capgo/capacitor-giocatore di video per la capacità nativa in Utilizzare @capgo/capacitor-video-player, @capgo/capacitor-video-player per il dettaglio di implementazione in @capgo/capacitor-video-player, e Utilizzare @capgo/capacitor-native-navigation per la capacità nativa in Utilizzare @capgo/capacitor-native-navigation.