Ubah Aplikasi Nuxt Anda ke iOS & Android dengan Capacitor 8

Introduction

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

Capacitor mengelilingi aplikasi web Anda dengan 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 Anda berjalan seperti semula.

Apa yang Anda akan pelajari:

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

Ingin memulai proyek baru dari awal? Cek panduan kami pada Membangun Aplikasi Mobile Nuxt dari Awal.

Manfaat Menggunakan Nuxt dan Capacitor

Reusabilitas Code: 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 filesystem melalui Capacitor plugin.
Pengembangan yang Sederhana: Gunakan pola Vue/Nuxt yang familiar tanpa harus belajar pengembangan native.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Node.js 18+ terpasang
Aplikasi yang sudah ada Nuxt 4 Aplikasi
Xcode (untuk pengembangan iOS, hanya macOS)
Android Studio (untuk pengembangan Android)

Mengonfigurasi Aplikasi Nuxt Anda untuk Mobile

Langkah pertama adalah mengonfigurasi aplikasi Nuxt Anda untuk pengembangan statis. Capacitor membutuhkan file HTML/JS/CSS statis untuk dijadikan aplikasi native.

Pastikan Anda package.json mempunyai skrip pembangunan:

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

Penting: Jika Anda menggunakan fitur sisi server (API rute, middleware server, dll.), Anda perlu meredefinisikan fitur-fitur tersebut untuk menggunakan alternatif sisi klien atau API eksternal.

Tes pembangunan statis dengan menjalankan:

bun run generate

Anda seharusnya melihat sebuah .output/public folder dengan file-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-plugin Capacitor umum yang Anda mungkin butuhkan:

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

Plugin-plugin ini menyediakan fitur-fitur penting:

@capacitor/appHandle event hidup aplikasi (depan/belakang, tautan dalam)
@capacitor/keyboard: Pengaturan Layar Splash
@capacitor/splash-screen: Penyimpanan Nilai (seperti localStorage tetapi asli)
Mulai capacitor dengan detail proyek Anda:Ganti
@capacitor/preferencesGanti

Initialize Capacitor with your project details:

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 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 Studio Android. Untuk iOS, Anda membutuhkan Mac dengan Xcode.

Membangun dan sinkronisasi proyek Anda:

bun run mobile

Perintah ini menjalankan skrip kustom Anda yang menghasilkan bangunan statis Nuxt dan sinkronisasi file dengan platform native.

Membangun dan Mengembangkan Aplikasi Native

Untuk membangun dan mengembangkan aplikasi mobile native Anda, ikuti langkah-langkah berikut:

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 perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Buka 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

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

xcode-run

Di Xcode, atur akun tanda tangan Anda untuk mengirimkan aplikasi ke perangkat nyata. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan 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 Anda 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:

Temukan alamat IP lokal Anda:

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

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

Terapkan perubahan ke proyek asli Anda:

bunx cap copy

Perintah copy mengcopy folder web dan perubahan konfigurasi ke proyek asli tanpa mengupdate proyek seluruhnya.

Mulai server pengembangan Nuxt dan rebuild 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 tersebut.

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

Menggunakan Capacitor Plugin

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

Instal plugin Share:

bun add @capacitor/share

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

Buat ulang dan jalankan aplikasi pada perangkat Anda.

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

Menambahkan Konsta UI v5 dengan Tailwind CSS 4

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

Anda perlu memiliki Tailwind CSS 4 sudah terinstal.

Instal paket yang diperlukan:

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 Konsta UI 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 Konsta UI:

<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 terlihat asli:

Kesimpulan

Anda telah berhasil mengonversi aplikasi web Nuxt yang sudah ada menjadi aplikasi native iOS dan Android menggunakan Capacitor 8. Kodebase Vue Anda sekarang dapat 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 mengirimkan ke simulator iOS dan Android
Mengaktifkan ulang hidup untuk pengembangan
Menambahkan Konsta UI secara opsional untuk komponen yang terlihat native

Langkah-langkah selanjutnya:

Mengatur Capgo untuk pembaruan melalui udara tanpa resubmisi toko aplikasi
Tambahkan lebih banyak plugin asli 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

Mulai proyek baru? Cek Membangun Aplikasi Mobile Nuxt dari Awal untuk panduan langkah demi langkah.

Sumber Daya

Pelajari bagaimana Capgo dapat membantu Anda membangun aplikasi yang lebih baik dengan lebih cepat, daftar diri untuk akun 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, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.