Ini tutorial ini akan membantu Anda mengubah aplikasi web Vue menjadi aplikasi mobile native menggunakan Capacitor. Anda juga dapat menambahkan Capgo Navigasi dan Transisi Native untuk merasakan aplikasi mobile native, dan menggunakan tailwind-capacitor untuk area yang aman.
About Capacitor
Capacitor adalah alat yang mengubah cara Anda mengintegrasikan aplikasi web ke dalam aplikasi mobile native. Alat ini memungkinkan Anda untuk dengan mudah mengintegrasikan Capacitor ke dalam proyek web apa pun 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 Anda
Pertama, buatlah aplikasi Vue baru dengan menjalankan perintah berikut:
vue create my-app
cd my-app
npm installUntuk mengatur aplikasi Vue Anda untuk pengiriman mobile native, Anda akan perlu mengexport proyek Anda. Tambahkan skrip di file package.json untuk membangun dan menyalin proyek Vue: Setelah menjalankan perintah, Anda harus melihat folder baru di direktori root proyek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti. Mengambahkan __CAPGO_KEEP_0__ ke Aplikasi Vue Anda
{
"scripts": {
// ...
"build": "vue-cli-service build"
}
}__CAPGO_KEEP_0__ 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. build Preparing Your Vue App dist folder in your project’s root directory. This folder will be used by Capacitor later.
To prepare your Vue app for native mobile deployment, you’ll need to export your project. Add a script in your package.json file to build and copy the Vue project: After running the command, you should see a new folder in your project’s root directory. This folder will be used by Capacitor later. Adding Capacitor to Your Vue App
Untuk mengonversi aplikasi web Vue Anda menjadi kontainer mobile native, ikuti langkah-langkah berikut:
-
Pasang Capacitor CLI sebagai dependensi pengembangan dan atur dalam proyek Anda. Terima nilai default untuk nama dan ID aplikasi selama pengaturan.
-
Pasang paket inti dan paket relevan untuk platform iOS dan Android.
-
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 androidAnda seharusnya 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 Google Play Console untuk Android untuk mendistribusikan aplikasi Anda di toko aplikasi.
Gunakan Capacitor CLI untuk membuka proyek native baik:
npx cap open ios
npx cap open androidDeploy aplikasi Anda ke perangkat yang terhubung menggunakan Android Studio atau Xcode.
Capacitor Live Reload
Aktifkan ulang muat hidup di 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 porta 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;Gunakan __CAPGO_KEEP_0__ untuk mengakses proyek native Anda:
npx cap copyNow, your app will automatically reload and show changes when you update your Vue app.
Menggunakan Capacitor Plugin
Instal plugin Capacitor seperti plugin Share dan gunakan di aplikasi Vue Anda:
npm i @capacitor/shareImport paket dan panggil fungsi di aplikasi Anda: share() Setelah menginstal plugin baru, jalankan perintah ini 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 layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong. sync Antarmuka native dengan __CAPGO_KEEP_0__ Navigasi dan Transisi Native
npx cap syncNext, 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 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Tailwind CSS.
Untuk merasakan pengalaman mobile asli di aplikasi Vue + Capacitor gunakan plugin Capgo bukan UI web seperti Konsta UI:
- @capgo/capacitor-native-navigation — navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang terblurr di Android. Router Vue Anda menjaga status jalur; plugin ini mengendalikan chrome asli.
- @capgo/capacitor-transitions — transisi halaman seperti Ionic dan swipe-back di lapisan WebView tanpa menerima UI Ionic.
Pasang kedua:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi navigasi asli dengan mode CSS inset agar konten web menghormati bar-bar asli:
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 terblurr):
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 asli di shell aplikasi Anda:
<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>Bungkus halaman yang dilalui dengan cap-router-outlet, cap-page, dan cap-contentdan panggil setDirection('forward') atau setDirection('back') sebelum berpindah ke halaman lain. Jangan duplikat header atau footer web ketika navigasi asli menguasai permukaan tersebut.
Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi-asli dan Menggunakan @capgo/capacitor-transisi.
Wilayah aman dengan Tailwind
Untuk wilayah perangkat aman di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor pada npm). Ini menyediakan safe-areas utilitas dan plugin lainnya Capacitor-ramah Tailwind:
bun add -D tailwind-capacitorDi src/assets/main.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Gunakan utilitas seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya secara manual. Projek ini aktif dikembangkan — jika ada sesuatu 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 banyak
atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Kerjakan cek-cek ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar
Tambahkan tag meta viewport di
Periksa apakah tag meta viewport sudah benar diterapkan di index.html dalam bahasa Indonesia <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Atur area aman iOS dari satu wrapper root saja
Buat sebuah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-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);
}Tutup 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-capacitor, Anda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.
Atur Capacitor iOS contentInset ke never pertama
Dalam capacitor.config.ts, lebih suka native inset disabled dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') menguasai 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 benar-benar mengalami overflows
Biasanya, penyebabnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel 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, gantikan w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, padding area aman yang diulang, 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-fitur terbaru dan perbaikan bug.
Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, daftar diri gratis hari ini.
Teruslah 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 For kemampuan asli dalam Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities Untuk detail implementasi dalam @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player For 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 For kemampuan asli dalam Menggunakan @capgo/capacitor-native-navigation.
