Building Mobile Apps with Vue and Capacitor

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

Tentang Capacitor

Capacitor adalah alat yang mengubah permainan yang memungkinkan Anda untuk dengan mudah mengintegrasikan itu ke dalam proyek web apa pun dan mengubah aplikasi Anda menjadi aplikasi seluler native. Ini menghasilkan proyek Xcode dan Android Studio native untuk Anda dan memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.

Mengsiapkan Aplikasi Vue Anda

Terlebih dahulu, buatlah sebuah aplikasi Vue baru dengan menjalankan perintah berikut:

vue create my-app
cd my-app
npm install

Mengatur aplikasi Vue Anda untuk pengembangan mobile native, Anda memerlukan untuk mengexport proyek Anda. Tambahkan sebuah skrip di dalam file Setelah menjalankan perintah tersebut, Anda harus melihat sebuah folder baru di direktori root proyek Anda. Folder ini akan digunakan oleh kemudian. Mengintegrasikan ke Aplikasi Vue Anda

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

Mengubah aplikasi web Vue Anda menjadi kontainer mobile native, ikuti langkah-langkah berikut: build Instal sebagai dependensi pengembangan dan atur konfigurasi di dalam proyek Anda. Terima nilai default untuk nama dan ID paket selama proses pengaturan. dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

Instal dan konfigurasi untuk mengubah aplikasi web Vue Anda menjadi aplikasi mobile native.

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. Tambahkan platform, dan akan membuat folder untuk setiap platform di direktori root proyek Anda.

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

Kamu sekarang harus melihat folder baru iOS dan Android folder

Update file konfigurasi __CAPGO_KEEP_0__.json untuk mengarahkan ke hasil perintah build Anda: Sekarang, kamu bisa membangun proyek Vue kamu dan sinkronkan dengan capacitor: Bangun dan Deploy Aplikasi Nativ Build and Deploy Native 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

android

To mengembangkan aplikasi iOS, Anda membutuhkan Xcode terinstal, dan untuk aplikasi Android, Anda membutuhkan Android Studio terinstal. Selain itu, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Console Google Play untuk Android untuk mendistribusikan aplikasi Anda di toko aplikasi.

Menggunakan Capacitor CLI untuk membuka proyek native keduanya:

npx cap open ios
npx cap open android

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

Capacitor Reload Hidup

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

Temukan alamat IP lokal Anda dan update file dengan IP dan port yang benar: capacitor.config.ts Mengaplikasikan 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;

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

npx cap copy

Menggunakan __CAPGO_KEEP_0__ Plugin

Menginstal plugin Capacitor, seperti plugin Share, dan menggunakan plugin tersebut di aplikasi Vue Anda:

Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:

npm i @capacitor/share

fungsi share() fungsi di aplikasi 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>

Setelah menginstal plugin baru, jalankan perintah ini dan redeploy aplikasi ke perangkat Anda: sync 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.

npx cap sync

Tampilan UI yang terasa asli dengan Capgo Navigasi dan Transisi Asli

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Vue adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS Untuk merasakan mobile native di aplikasi Vue + __CAPGO_KEEP_0__, gunakan plugin __CAPGO_KEEP_1__ daripada kit UI web saja seperti Konsta UI:.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation Untuk membuat aplikasi Vue mobile yang lebih native, gunakan __CAPGO_KEEP_1__ plugins daripada kit UI web saja seperti Konsta UI.
• Transisi @capgo/capacitor Transisi halaman dengan gaya Ionic dan pengembalian ke belakang dengan gesekan iOS di layer WebView, tanpa menerima UI Ionic.

Install kedua:

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 kaca cair (iOS menggunakan rendering milik 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 dengan cap-router-outlet, cap-pagedan cap-contentdan panggil setDirection('forward') atau setDirection('back') context

Pertanyaan untuk tindakan alternatif. | Pertanyaan untuk tindakan Appflow. | Pertanyaan untuk tindakan Capwesome. | Subjudul FAQ konsultasi. | Tindakan Appflow atau | Memanfaatkan @capgo/capacitor-native-navigation dan Memanfaatkan @capgo/capacitor-transisi.

Area yang aman dengan Tailwind

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

bun add -D tailwind-capacitor

Ini src/assets/main.css:

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

Pakailah utilitas seperti pt-safe, pb-safe, dan px-safe bukan dengan menaburkan env(safe-area-inset-*) di tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Vue Anda, buka PR di GitHub.

Pengaturan Layout iOS (Viewport, Area Aman, dan Overflows Horizontal)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih overflow-x: hidden atau menyesuaikan tag viewport sendiri biasanya tidak dapat memperbaikinya. Jalankan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Tambahkan tag meta viewport di index.html di dalam <head>:

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

Pengaturan Area Aman iOS dari satu wrapper root saja

Buatlah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda:

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

Selimuti semua konten halaman di dalam .app-shellPengaturan padding area aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitorAnda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Tetapkan Capacitor iOS contentInset ke never context":"Page/area: Halaman produk update live. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To)."

pertama capacitor.config.tsDalam contentInsetMode: 'css', lebih baik mengaktifkan pengaturan inset asli dan biarkan CSS (atau Native Navigation’s

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-*) jarak padding adalah penyebab umum dari penempatan ganda.

Cari elemen yang sebenarnya mengalami overflows.

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

Inspektor Web Safari, 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 overflows horizontal berasal dari 100vw / w-screen, padding area yang aman yang diulang, atau kontainer dengan 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 yang terkini.

Belajar bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, daftar diri untuk akun gratis hari ini.

Teruskan 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-aktivitas-hidup untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi dalam @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli dalam Menggunakan @capgo/capacitor-native-navigation.