Dalam tutorial ini, kami akan memandu 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 aman.
Tentang Capacitor
Capacitor adalah alat yang mengubah permainan yang memungkinkan Anda untuk dengan mudah mengintegrasikan Capacitor ke dalam proyek web apa pun dan mengonversi aplikasi Anda menjadi aplikasi mobile native. Alat ini menghasilkan proyek Xcode dan Android Studio native untuk Anda dan memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.
Mempersiapkan Aplikasi Vue
Pertama, buatlah sebuah aplikasi Vue baru dengan menjalankan perintah berikut:
vue create my-app
cd my-app
npm installUntuk mempersiapkan aplikasi Vue Anda untuk pengembangan mobile native, Anda akan perlu mengexport proyek Anda. Tambahkan skrip di 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__ kemudian. dist Menambahkan Capacitor ke Aplikasi Vue Anda
Adding Capacitor to Your Vue App
Pasang __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sebagai dependensi pengembangan dan atur dalam proyek Anda. Terima nilai default untuk nama dan ID paket selama pengaturan.
-
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.
-
Tambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek Anda:
-
Install the Capacitor __CAPGO_KEEP_1__ as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
# 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 androidSekarang Anda harus melihat folder baru iOS dan android dalam proyek Vue Anda.
Perbarui file capacitor.config.json untuk mengarahkan webDir ke hasil perintah build Anda:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Sekarang, Anda dapat membangun proyek Vue Anda dan sinkronkan dengan Capacitor:
npm run build
npx cap syncBuat dan Deploy Aplikasi Native
Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan 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.
Gunakan Capacitor CLI untuk membuka proyek native keduanya:
npx cap open ios
npx cap open androidDeploy aplikasi Anda ke perangkat terhubung menggunakan Android Studio atau Xcode.
Capacitor Live Reload
Aktifkan ulang muatan 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 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;Sekarang, aplikasi Anda akan secara otomatis reload dan menampilkan perubahan ketika Anda memperbarui aplikasi Vue Anda.
npx cap copyMenggunakan __CAPGO_KEEP_0__ Plugins
Pasang plugin Capacitor seperti plugin Share, dan gunakan di aplikasi Vue Anda:
Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:
npm i @capacitor/shareImport the package and call the 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 yang menyebabkan overflow horizontal atau area aman yang dipotong.
npx cap syncAntarmuka native dengan Capgo Navigasi dan Transisi Native
Native-feeling UI with Capgo Native Navigation and Transitions
Ionic untuk membangun aplikasi cross-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__ bukan kit UI web saja seperti Konsta UI:.
@Capacitor/Capgo-native-navigation
- @capgo/capacitor-native-navigation function in your app:
- Transisi capgo/capacitor-transisi — Transisi halaman Ionic-style dan swipe-back iOS di layer WebView, tanpa menerima UI Ionic.
Pasang kedua:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi 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 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>Kemas halaman yang diarahkan dalam cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.
Lihat panduan lengkap: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.
Daerah aman dengan Tailwind
Untuk daerah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor pada npm). Ini menyediakan safe-areas fasilitas dan lain-lain Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorDalam src/assets/main.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Gunakan fasilitas seperti pt-safe, pb-safe, dan px-safe bukan dengan menyebarkan secara manual. Projek ini aktif dikembangkan — jika ada yang hilang 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
atau mengatur tag viewport saja biasanya tidak cukup untuk memperbaiki masalah ini. Jalankan periksaan-periksaan ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar
Tambahkan tag meta viewport di
dalam index.html Atasi Area Aman iOS dari satu wrapper root saja <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Buatlah shell aplikasi tunggal dan berikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda-beda:
Bungkus semua konten halaman di dalamnya
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);
}Handle iOS safe area dari satu wrapper root saja .app-shell. Padding area yang aman di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.
Dengan @capgo/tailwind-capacitor, Anda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di dalamnya.
Atur Capacitor iOS contentInset ke never pertama
Dalam capacitor.config.ts, lebih baik mengaktifkan inset native dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengontrol area 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-*) penambahan spasi yang umum menyebabkan penambahan spasi ganda.
Cari elemen yang sebenarnya mengalami overflows.
Biasanya, penyebabnya adalah elemen yang menggunakan 100vw, lebar piksel tetap, atau lebar yang sangat w-screen, min-width.
Dalam 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, gantikan w-screen dengan w-full ketika memungkinkan. Banyak masalah overflows horizontal berasal dari 100vw / w-screen, penambahan spasi aman yang duplikat, 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 menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.
Belajar bagaimana Capgo dapat membantu Anda membangun 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-player-video untuk kemampuan asli di Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.
