Mengubah Aplikasi Web Nuxt Anda ke iOS & Android dengan Capacitor 8

Pendahuluan

Memiliki aplikasi web Nuxt yang sudah ada? Dalam panduan ini, Anda akan belajar bagaimana mengubahnya menjadi aplikasi mobile native iOS dan Android menggunakan Capacitor 8 — versi terbaru dengan kinerja yang ditingkatkan dan fitur baru.

Capacitor membungkus aplikasi web Anda dalam kontainer native, memberikan akses ke API perangkat seperti kamera, sistem file, dan notifikasi push sambil menjaga kodebase Vue yang sudah ada. Berbeda dengan Flutter atau React Native, Anda tidak perlu menulis ulang apa pun — Nuxt code berjalan seperti biasa.

What akan Anda pelajari:

• Konfigurasi aplikasi Nuxt yang sudah ada untuk pengembangan statis
• Tambahkan Capacitor 8 dengan plugin native yang penting
• Bangun dan tes pada simulator iOS dan Android
• Aktifkan reload hidup untuk pengembangan yang lebih cepat
• Perbaiki masalah tata letak iOS yang umum (viewport, area aman, overflow horizontal)
• Tambahkan antarmuka yang terasa native dengan Capgo Native Navigation dan Transisi

Inginkan memulai proyek baru dari awal? Cek panduan kami pada Building a Nuxt Mobile App from Scratch.

Manfaat Menggunakan Nuxt dan Capacitor

• Code Reusabilitas: Bagikan komponen Vue dan logika antara aplikasi web dan mobile.
• Kinerja: Penggabungan statis Nuxt menciptakan bundle yang dioptimalkan untuk mobile.
• Kemampuan Asli: Akses fitur perangkat seperti kamera, lokasi geografis, dan sistem file melalui plugin Capacitor.
• Pengembangan yang Sederhana: Gunakan pola Vue/Nuxt yang familiar tanpa perlu belajar pengembangan asli.

Persyaratan Sebelumnya

: Pastikan Anda telah memenuhi syarat-syarat berikut sebelum memulai:

• Node.js 18+ : Terinstal
• : Sudah ada Nuxt 4 aplikasi
• Xcode (untuk pengembangan iOS, macOS hanya)
• Android Studio (untuk pengembangan Android)

Mengatur Aplikasi Nuxt Anda untuk Mobile

Langkah pertama adalah mengatur aplikasi Nuxt Anda untuk pengembangan statis. Capacitor memerlukan file HTML/JS/CSS statis untuk dijadikan satu dengan aplikasi native.

Pastikan Anda memiliki package.json context

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

script generate: Penting: Jika Anda menggunakan fitur server-side (API rute, middleware server, dll.), Anda perlu merenovasi fitur-fitur tersebut untuk menggunakan alternatif client-side atau API eksternal.

Tes generasi statis dengan menjalankan:

bun run generate

Kamu harus melihat sebuah .output/public folder dengan file statis kamu. Ini adalah apa yang Capacitor akan bundel ke dalam aplikasi native kamu.

Menggunakan Capacitor 8 di Projek Kamu

Untuk mengemas aplikasi Nuxt kamu ke dalam kontainer aplikasi mobile native, ikuti langkah-langkah berikut:

1. Instal Capacitor core dan CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

2. Instal plugin Capacitor umum yang kamu butuhkan:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

Plugin ini menyediakan fitur-fitur penting:

• @capacitor/app: Menghandle kejadian siklus aplikasi (depan/belakang, tautan dalam)
• @capacitor/keyboard: Mengontrol perilaku kibor di mobile
• @capacitor/layar-splash: Atur layar splash native
• @capacitor/bar-status: Gaya bar status perangkat
• @capacitor/preferensi: Penyimpanan nilai kunci (seperti localStorage tetapi native)

3. Inisialisasi Capacitor dengan detail proyek Anda:

bunx cap init my-app com.example.myapp --web-dir .output/public

Ganti my-app dengan nama aplikasi Anda dan com.example.myapp dengan ID aplikasi Anda (notasi domain terbalik).

4. Buat atau perbarui file dengan konfigurasi yang tepat: capacitor.config.ts @__CAPGO_KEEP_0__/

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

5. Instalasi platform native:

bun add @capacitor/ios @capacitor/android

6. Tambahkan folder platform native:

bunx cap add ios
bunx cap add android

Capacitor akan membuat ios dan android folder-folder di root project Anda yang berisi proyek native.

Untuk membangun proyek Android, Anda membutuhkan Android Studio. Untuk iOS, Anda membutuhkan Mac dengan Xcode.

7. Membangun dan Sinkronisasi Proyek:

bun run mobile

Ini menjalankan skrip kustom Anda yang menghasilkan build statis Nuxt dan sinkronisasi file dengan platform native.

Membangun dan Mengirimkan Aplikasi Native

To build and deploy your native mobile app, follow these steps:

Membangun dan mengirimkan aplikasi mobile native Anda, ikuti langkah-langkah di bawah ini: To develop iOS apps, you need to have Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode Xcode

1. installed, and for Android apps, you need to have

terpasang, dan untuk aplikasi Android, Anda memerlukan

bun run mobile:ios

Android Studio

bun run mobile:android

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android

2. installed. Moreover, if you plan to distribute your app on the app store, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android.

• In Studio Android, tunggu proyek siap, lalu klik tombol “Run” untuk mengirimkan aplikasi ke perangkat yang terhubung atau emulator.

• Pada Xcode, atur akun tanda tangan Anda untuk mengirimkan aplikasi ke perangkat nyata. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (perlu diingat bahwa Anda harus terdaftar dalam Program Pengembang Apple). Setelah diatur, klik tombol “Play” untuk menjalankan aplikasi pada perangkat yang terhubung.

Selamat! Anda telah berhasil mengirimkan aplikasi web Nuxt ke perangkat mobile.

Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…

Capacitor Live Reload

Pada pengembangan, Anda dapat memanfaatkan live reloading untuk melihat perubahan secara instan pada perangkat mobile. Untuk mengaktifkan fitur ini, ikuti langkah-langkah berikut:

1. Cari alamat IP lokal Anda:

• Pada macOS, jalankan perintah berikut di terminal:

  ipconfig getifaddr en0

• Pada Windows, jalankan:

  ipconfig

  Cari alamat IPv4 di output.

2. Perbarui capacitor.config.ts untuk mengarah ke server pengembangan Anda:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

Ganti YOUR_IP_ADDRESS dengan alamat IP lokal Anda (misalnya, 192.168.1.100).

3. Aplikasikan perubahan ke proyek native Anda:

bunx cap copy

Perintah copy menyalin folder web dan perubahan konfigurasi ke proyek native tanpa mengupdate proyek secara keseluruhan.

4. Mulai server pengembangan Nuxt dan rebuild di Xcode/Android Studio:

bun run dev

Sekarang, setiap kali Anda membuat perubahan pada aplikasi Nuxt, aplikasi mobile akan secara otomatis reload untuk menampilkan perubahan tersebut.

Penting: Jika Anda menginstal plugin baru atau membuat perubahan pada file native, Anda perlu rebuild proyek native karena pengisian ulang hidup hanya berlaku untuk perubahan web code.

Menggunakan Capacitor Plugin

Capacitor plugin memungkinkan Anda mengakses fitur perangkat native dari aplikasi Nuxt Anda. Mari kita menjelajahi cara menggunakan plugin Plugin Berbagi sebagai contoh:

1. Pasang plugin Berbagi:

bun add @capacitor/share

2. Buat atau perbarui halaman untuk menggunakan plugin Berbagi. Di Nuxt 4, halaman berada di app/pages/:

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>

3. Sinkronkan perubahan dengan proyek native:

bun run mobile

Atau hanya sinkronkan tanpa merekonstruksi:

bunx cap sync

4. Rekonstruksi dan jalankan aplikasi di perangkat Anda.

Sekarang, ketika Anda mengklik tombol "Bagikan sekarang!" , dialog berbagi native akan muncul.

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native di iOS dan Android dengan Capgo navigasi dan transisi, dan memperbaiki masalah layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong.

Antarmuka native dengan Capgo Navigasi dan Transisi Native

Saya telah bekerja selama bertahun-tahun dengan Aplikasi Mobile Asli dengan Nuxt dan Capacitor ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Nuxt adalah sulit dan jarang berguna ketika Anda sudah memiliki.

For a native mobile feel in a Nuxt + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation @Capgo/Capacitor-native-navigation
• @capgo/capacitor-transitions @Capgo/Capacitor-transitions

— transisi halaman seperti Ionic dan swipe-back di lapisan WebView iOS tanpa mengadopsi UI Ionic.

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

Install kedua:

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

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

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

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

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

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

Menyelubungi halaman yang diarahkan dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') context: HTML teks fragmen dari string Capgo UI yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan pembaruan hidup Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Teks fragmen HTML dari string Capgo UI yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Teks fragmen HTML dari string Capgo UI yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Halaman/area: Halaman layanan konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul Subjudul FAQ Konsultasi). | Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau).

sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan-permukaan tersebut. Using @capgo/capacitor-native-navigation Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.

context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `and` (Atau).

Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transisi Area-aman dengan Tailwind CSS menggunakan @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 app/assets/css/main.css:

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

Untuk Nuxt 4 dengan Tailwind CSS 4, pastikan Anda menyimpan import ini di file CSS yang dikaitkan dengan nuxt.config.ts.

Pakai fasilitas seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya env(safe-area-inset-*) oleh tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Nuxt Anda, buka PR di GitHub.

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

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, tambahkan lebih overflow-x: hidden atau mengatur tag viewport saja biasanya tidak cukup. Lakukan pengecekan-pengecekan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar.

Dalam nuxt.config.ts, atur viewport melalui app.head:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
        },
      ],
    },
  },
});

Handle area aman iOS dari satu wrapper root saja.

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

html,
body,
#__nuxt {
  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);
}

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

Dengan @capgo/tailwind-capacitor, Anda dapat mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe pada shell tunggal tersebut.

Bangun Capacitor Mobile Asli contentInset ke never pertama

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  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 kelebihan

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

In 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-screentambahan padding area aman yang duplikat, atau kontainer dengan lebar tetap — bukan dari tag meta viewport itu sendiri.

Kesimpulan

Anda telah berhasil mengonversi aplikasi web Nuxt yang sudah ada menjadi aplikasi mobile native iOS dan Android menggunakan Capacitor 8. Kode Vue Anda sekarang berjalan secara native di perangkat mobile dengan akses ke API perangkat.

Apa yang Anda capai:

• Mengonfigurasi Nuxt untuk pengembangan statis
• Menambahkan Capacitor 8 dengan plugin yang penting
• Membangun dan mengirim ke simulator iOS dan Android
• Mengaktifkan reload hidup untuk pengembangan
• Memperbaiki masalah tata letak iOS umum (viewport, area aman, keluaran)
• Menambahkan antarmuka native yang terasa dengan Capgo Navigasi dan Transisi Native

Langkah selanjutnya:

• Konfigurasi Capgo untuk pembaruan melalui udara tanpa resubmisi toko aplikasi
• Tambahkan lebih banyak plugin native seperti Kamera, Lokasi, atau Notifikasi Push
• Konfigurasi ikon aplikasi dan layar splash untuk produksi
• Siapkan aplikasi Anda untuk pengiriman ke App Store dan Google Play

Membuat proyek baru? Cek keluar Pembangunan Aplikasi Mobile Nuxt dari Awal untuk panduan langkah demi langkah.

Sumber Daya

• Documentasi Nuxt
• Capacitor 8 Dokumentasi
• @capgo/capacitor-navigasi native – Tab Baja Kaca Liquid dan Chrome Native
• @capgo/capacitor-transisi – Transisi Halaman yang Terasa Sama dengan Native
• @capgo/tailwind-capacitor – Utilitas Area Aman Tailwind untuk Capacitor
• Capgo - Update Langsung untuk Aplikasi Capacitor

Belajar bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, Pendaftaran gratis hari ini.

Teruskan dari Mengubah Aplikasi Nuxt Anda ke iOS & Android dengan Capacitor 8

Jika Anda menggunakan Mengubah Aplikasi Nuxt Anda ke iOS & Android dengan Capacitor 8 Untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Ionic Enterprise Plugin Alternatives, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.