Building Mobile Apps with Vue and Capacitor

Dalam tutorial ini, kami akan mengajarkan Anda cara mengonversi aplikasi web Vue menjadi aplikasi mobile native menggunakan Capacitor. Anda juga dapat menambahkan Capgo Native Navigation dan Transisi untuk merasakan aplikasi mobile native, dan menggunakan tailwind-capacitor untuk area yang aman.

Tentang Capacitor

Capacitor adalah alat yang mengubah cara Anda mengintegrasikan aplikasi web ke dalam aplikasi mobile native. Alat ini memungkinkan Anda untuk dengan mudah mengintegrasikan aplikasi web ke dalam aplikasi mobile native dan mengubah aplikasi Anda menjadi aplikasi mobile native. Alat ini juga dapat menghasilkan proyek Xcode dan Android Studio native untuk Anda dan memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.

Mengatur Aplikasi Vue

Pertama, buatlah aplikasi Vue baru dengan menjalankan perintah berikut:

vue create my-app
cd my-app
npm install

Untuk mengatur aplikasi Vue Anda untuk pengembangan mobile native, Anda akan perlu mengexport proyek Anda. Tambahkan skrip di dalam file package.json untuk membangun dan menyalin proyek Vue:

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

Setelah menjalankan build perintah, Anda harus melihat folder baru di direktori root proyek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti. dist Menambahkan Capacitor ke Aplikasi Vue Anda

Capacitor

To mengubah aplikasi web Vue Anda menjadi kontainer mobile native, ikuti langkah-langkah berikut:

1. Instal Capacitor CLI sebagai dependensi pengembangan dan atur konfigurasi di dalam proyek Anda. Terima nilai default untuk nama dan ID aplikasi selama proses pengaturan.

2. Instal paket inti dan paket relevan untuk platform iOS dan Android.

3. Tambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek Anda:

# 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

Sekarang Anda harus melihat folder baru: iOS dan context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan). android

folder di proyek Vue Anda. capacitor.config.json __CAPGO_KEEP_0__.config.json directory web kepada hasil perintah build Anda:

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

Membangun dan Mengirimkan Aplikasi Nativ

Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan Android Studio terinstal. Selain itu, Anda perlu bergabung dengan Program Pengembang Apple untuk iOS dan Console Google Play untuk Android untuk mendistribusikan aplikasi Anda di toko aplikasi.

Pakai Capacitor CLI untuk membuka proyek native keduanya:

npx cap open ios
npx cap open android

Mengirimkan aplikasi Anda ke perangkat yang terhubung menggunakan Android Studio atau Xcode.

Capacitor Live Reload

Mengaktifkan live reload pada perangkat mobile Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu di jaringan Anda.

Cari alamat IP lokal Anda dan update file dengan alamat IP dan port yang benar: capacitor.config.ts Terapkan perubahan-perubahan ini dengan menyalinnya ke proyek native Anda:

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;

Terapkan perubahan-perubahan ini dengan menyalinnya ke proyek native Anda:

npx cap copy

Sekarang, aplikasi Anda akan secara otomatis direfresh dan menampilkan perubahan ketika Anda memperbarui aplikasi Vue Anda.

Menggunakan Capacitor Plugin

Pasang plugin Capacitor, seperti plugin Share, dan gunakan di aplikasi Vue Anda:

npm i @capacitor/share

Impor paket dan panggil fungsi di aplikasi Anda: share() Setelah memasang plugin baru, jalankan perintah dan redeploy aplikasi ke perangkat Anda:

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

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native di iOS dan Android dengan __CAPGO_KEEP_0__ navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong. sync Antarmuka native dengan __CAPGO_KEEP_0__ Navigasi dan Transisi Native

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.

Native-feeling UI with Capgo Native Navigation and Transitions

untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Vue adalah hacky dan jarang berharga ketika Anda sudah memiliki Sekarang, aplikasi Anda akan secara otomatis direfresh dan menampilkan perubahan ketika Anda memperbarui aplikasi Vue Anda. Menggunakan __CAPGO_KEEP_0__ Plugin Tailwind CSS.

Untuk merasakan pengalaman mobile asli di aplikasi Vue + Capacitor , gunakan plugin Capgo daripada UI web-only seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Pengaturan rute Vue Anda tetap; plugin menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman Ionic-style dan swipe-back di lapisan WebView iOS tanpa menerima UI Ionic.

Instal keduanya:

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

Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:

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

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

Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki sistem; Android menggunakan latar belakang WebView yang diboroskan):

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

Tambahkan transisi halaman native di shell aplikasi:

<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 halaman yang diarahkan dalam cap-router-outlet, cap-pagedan cap-contentatau panggil setDirection('forward') atau setDirection('back') Sebelum melanjutkan. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi-native dan Menggunakan @capgo/capacitor-transisi.

Wilayah aman dengan Tailwind

Untuk area aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm. Ini menyediakan safe-areas fasilitas dan plugin lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

In src/assets/main.css:

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

Pakai fasilitas seperti pt-safe, pb-safe, dan px-safe daripada menambahkannya secara manual. Projek ini aktif dikembangkan — jika ada yang kurang untuk pengaturan Vue Anda, env(safe-area-inset-*) buka PR di __CAPGO_KEEP_0__ open a PR on GitHub.

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak

atau mengatur tag viewport saja biasanya tidak cukup untuk memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar

Tambahkan tag meta viewport di

Pengaturan Layout iOS (Viewport, Area Aman, dan Horizontal Overflow) index.html di dalam <head>:

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

Menangani zona aman iOS dari wrapper root saja

Buatlah shell aplikasi tunggal dan aplikasikan padding zona aman di sana — bukan di komponen nested yang banyak:

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

Terapkan semua konten halaman di .app-shell. Menggunakan padding zona aman yang sama di beberapa header, modal, dan wrapper layout sering membuat UI terlihat terpotong atau terlalu besar.

Dengan @capgo/tailwind-capacitorkamu bisa mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Setel Capacitor iOS contentInset ke never context":"Page/area: Halaman produk yang berubah-ubah secara real-time. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To).

Di capacitor.config.ts, lebih baik menggunakan inset native yang dinonaktifkan dan biarkan CSS (atau Navigasi Native's) contentInsetMode: 'css') mengontrol area yang aman:

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

Menggabungkan Capacitor’s automatic content inset dengan CSS env(safe-area-inset-*) padding adalah penyebab umum dari jarak ganda.

Temukan elemen yang sebenarnya mengalami overflown

Biasanya, pelaku adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel yang tetap, atau besar min-width.

Di Safari Web Inspector, jalankan:

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

Dengan Tailwind, ganti w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screenpadding area aman yang digandakan, atau kontainer lebar tetap — bukan dari tag meta viewport itu sendiri.

Kesimpulan

Capacitor adalah pilihan yang bagus untuk membuat aplikasi native berdasarkan proyek web yang sudah ada. Dengan penambahan Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat Daftar diri gratis hari ini.

Lanjutkan dari Membangun Aplikasi Mobile dengan Vue dan Capacitor

Jika Anda menggunakan Membangun Aplikasi Mobile dengan Vue dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-nyata- @capgo/capacitor-aktivitas-nyata- untuk detail implementasi dalam @capgo/capacitor-aktivitas-nyata- Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-pemain-video- @capgo/capacitor-pemain-video untuk detail implementasi dalam @capgo/capacitor-pemain-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-navigasi-asli.