Konversi Aplikasi Nuxt Anda ke iOS & Android dengan Capacitor 8

Pendahuluan

Anda 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 lebih baik 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 Anda yang sudah ada. Berbeda dengan Flutter atau React Native, Anda tidak perlu menulis ulang apa pun — aplikasi Nuxt code Anda berjalan seperti biasa.

Apa yang akan Anda pelajari:

Konfigurasi aplikasi Nuxt Anda yang sudah ada untuk penghasilan statis
Tambahkan Capacitor 8 dengan plugin native yang penting
Buat dan tes pada simulator iOS dan Android
Aktifkan ulang reload untuk pengembangan yang lebih cepat
Opsional: tambahkan Konsta UI untuk komponen yang terlihat native

Mau memulai proyek baru dari awal? Cek panduan kami pada Membuat Aplikasi Mobile Nuxt dari Awal.

Kelebihan Menggunakan Nuxt dan Capacitor

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

Persyaratan Sebelumnya

Sebelum Anda memulai, pastikan Anda telah:

Node.js 18+ terpasang
Proyek Nuxt yang sudah ada 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-file HTML/JS/CSS statis untuk dijadikan aplikasi native.

Pastikan Anda memiliki skrip generate: package.json Perlu diingat:

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

Jika Anda menggunakan fitur server-side (__CAPGO_KEEP_0__ routing, middleware server, dll.), Anda perlu meredefinisi fitur-fitur tersebut untuk menggunakan alternatif sisi klien atau API eksternal. If you’re using server-side features (API routes, server middleware, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

Jalankan:

bun run generate

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

Menambahkan Capacitor 8 ke Projek Anda

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

Pasang Capacitor core dan CLI:

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

Pasang plugin Capacitor umum yang Anda mungkin 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/splash-screen: Atur layar splash native
@capacitor/status-bar: Bentuk bar status perangkat
@capacitor/preferences: Penyimpanan nilai kunci (seperti localStorage tetapi native)

Mulai 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).

Buat atau perbarui capacitor.config.ts dengan konfigurasi yang tepat:

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;

Pasang platform native:

bun add @capacitor/ios @capacitor/android

Tambahkan folder platform asli:

bunx cap add ios
bunx cap add android

Capacitor akan membuat ios dan android folder di root proyek Anda yang berisi proyek asli.

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

Buat dan sinkronkan proyek Anda:

bun run mobile

Hal ini menjalankan skrip kustom Anda yang menghasilkan bangunan statis Nuxt dan menyinkronkan file dengan platform asli.

Membangun dan Mengirimkan Aplikasi Mobile Asli

Untuk membangun dan mengirimkan aplikasi mobile asli Anda, ikuti langkah-langkah ini:

Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan Android Studio terinstal. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda memerlukan mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Buka proyek-proyek native:

Untuk iOS:

bun run mobile:ios

Untuk Android:

bun run mobile:android

Atau langsung dengan Capacitor CLI:

bunx cap open ios
bunx cap open android

Buat dan jalankan aplikasi:

android-studio-run

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

xcode-run

Dalam Xcode, atur akun tanda tangan Anda untuk mengirimkan aplikasi ke perangkat nyata. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan memandu Anda melalui proses tersebut (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

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

Cari alamat IP lokal Anda:

Pada macOS, jalankan perintah berikut di terminal:
```
ipconfig getifaddr en0
```
Pada Windows, jalankan:
```
ipconfig
```
Cari alamat IPv4 di output.

Perbarui __CAPGO_KEEP_0__ capacitor.config.ts untuk mengarahkan 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).

Terapkan perubahan ke proyek asli Anda:

bunx cap copy

Pengaturan copy Perintah ini menyalin folder web dan perubahan konfigurasi ke proyek asli tanpa memperbarui proyek seluruhnya.

Mulai server pengembangan Nuxt dan merekonstruksi di Xcode/Android Studio:

bun run dev

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

Perlu diingat: Jika Anda menginstal plugin baru atau membuat perubahan pada file asli, Anda perlu merekonstruksi proyek asli karena pengisian ulang hidup hanya berlaku untuk perubahan code web.

Menggunakan Capacitor Plugin

Capacitor plugin memungkinkan Anda untuk mengakses fitur perangkat native dari aplikasi Nuxt. Mari kita eksplorasi cara menggunakan plugin Capacitor ini. Bagikan plugin __CAPGO_KEEP_0__ sebagai contoh:

Instal plugin Bagikan:

bun add @capacitor/share

Buat atau perbarui halaman untuk menggunakan plugin Bagikan. 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>

Sinkronkan perubahan dengan proyek native:

bun run mobile

Atau hanya sinkronkan tanpa membangun ulang:

bunx cap sync

Bbangun dan jalankan aplikasi di perangkat Anda.

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

Menambahkan Konsta UI v5 dengan Tailwind CSS 4

Untuk membuat tombol terlihat lebih ramah mobile, Anda dapat menambahkan Konsta UI untuk komponen iOS dan Android yang terlihat asli.

Anda perlu memiliki Tailwind CSS 4 sudah terinstal.

Pasang paket yang dibutuhkan:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Konfigurasi plugin Vite di nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

Buat app/assets/css/main.css:

@import 'tailwindcss';
@import 'konsta/theme.css';

Bungkus aplikasi Anda dengan UI Konsta App komponen di app/app.vue:

<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Perbarui halaman Anda untuk menggunakan komponen UI Konsta:

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>

Tambahkan font Roboto untuk tema Material Design di nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

Aplikasi Nuxt Anda sekarang harus memiliki tampilan mobile yang alami:

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 dapat berjalan secara native di perangkat mobile dengan akses ke API perangkat.

Apa yang Anda capai:

Dikonfigurasi Nuxt untuk penggabungan statis
Menambahkan Capacitor 8 dengan plugin yang penting
Membangun dan mengirimkan ke simulator iOS dan Android
Mengaktifkan ulang hidup untuk pengembangan
Menambahkan Konsta UI secara opsional untuk komponen yang terlihat asli

Langkah-langkah selanjutnya:

Tetapkan Capgo untuk pembaruan melalui udara tanpa pengulangan aplikasi toko
Tambahkan plugin native lain 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 Membuat Aplikasi Nuxt Mobile dari Awal untuk panduan langkah demi langkah.

Sumber Daya

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

Mengubah Aplikasi Nuxt Anda ke iOS &amp; Android dengan Capacitor 8