Converti la tua app Nuxt in iOS & Android con Capacitor 8

Introduzione

Hai già un'applicazione web Nuxt? In questo guide, imparerai a trasformarla in app mobili native per iOS e Android utilizzando Capacitor 8 — l'ultima versione con prestazioni migliorata e nuove funzionalità.

Capacitor avvolge la tua app web in un contenitore nativo, dando accesso a API di dispositivo come camera, filesystem e notifiche push mentre mantiene il tuo codice Vue esistente. A differenza di Flutter o React Native, non hai bisogno di ricodificare nulla — il tuo Nuxt code funziona come sempre.

Cosa imparerai:

Configura la tua app Nuxt esistente per la generazione statica
Aggiungi Capacitor 8 con plugin nativi essenziali
Costruisci e testa sui simulatori di iOS e Android
Abilita il reload live per un sviluppo più veloce
Aggiungi optionalmente Konsta UI per componenti che assomigliano a quelli nativi

Se desideri iniziare un nuovo progetto da zero? Consulta la nostra guida su Costruire un'app mobile Nuxt da zero.

I benefici dell'utilizzo di Nuxt e Capacitor

La riproponibilità di Code: Condividi i tuoi componenti Vue e logica tra app web e mobili.
Performance: La generazione statica di Nuxt crea bundle ottimizzati perfetti per il mobile.
Funzionalità native: Accedi alle funzionalità del dispositivo come camera, geolocalizzazione e filesystem attraverso i plugin di Capacitor.
Sviluppo semplificato: Utilizza modelli familiari Vue/Nuxt senza dover imparare lo sviluppo nativo.

Prerequisiti

: Prima di iniziare, assicurati di avere:

Node.js 18+ installato
Un'applicazione esistente Nuxt 4 applicazione
Xcode (per lo sviluppo iOS, disponibile solo su macOS)
Android Studio (per lo sviluppo Android)

Configurazione della tua App Nuxt per dispositivi mobili

Il primo passo è configurare la tua app Nuxt per la generazione statica. Capacitor richiede file HTML/JS/CSS statici per poterli bundle nella app nativa.

Assicurati che la tua package.json ha il script di generazione:

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

Importante: Se stai utilizzando funzionalità server-side (API percorsi, middleware del server, ecc.), dovrai rifare quelle per utilizzare alternative client-side o API esterne.

Testa la generazione statica eseguendo:

bun run generate

Dovresti vedere un .output/public cartella con i tuoi file statici. Questo è ciò che Capacitor compilerà nel tuo app nativa.

Aggiungere Capacitor 8 al tuo Progetto

Per pacchettizzare la tua app Nuxt in un contenitore mobile nativo, segui questi passaggi:

Installa Capacitor core e CLI:

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

Installa plugin Capacitor comuni che probabilmente avrai bisogno:

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

Questi plugin forniscono funzionalità essenziali:

@capacitor/app: Gestisci gli eventi di ciclo di vita dell'applicazione (in primo piano/ background, collegamenti profondi)
@capacitor/tastiera: Controlla il comportamento della tastiera su dispositivi mobili
@capacitor/schermo di benvenuto: Gestisci lo schermo di benvenuto nativo
@capacitor/barra dello stato: Stila la barra dello stato del dispositivo
@capacitor/preferenze: Archiviazione di valori chiave (come localStorage ma nativa)

Inizia Capacitor con i dettagli del tuo progetto:

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

Sostituisci my-app con il nome del tuo'applicazione e com.example.myapp con il tuo ID dell'applicazione (notazione di dominio inverso).

Crea o aggiorna il capacitor.config.ts file con la configurazione corretta:

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;

Installa piattaforme native:

bun add @capacitor/ios @capacitor/android

Aggiungi le cartelle delle piattaforme native:

bunx cap add ios
bunx cap add android

Capacitor creerà ios e android cartelle alla radice del tuo progetto contenenti i progetti nativi.

Per costruire il progetto Android, hai bisogno di Android Studio. Per iOS, hai bisogno di un Mac con Xcode.

Costruisci e sincronizza il tuo progetto:

bun run mobile

Esegue il tuo script personalizzato che genera la costruzione statica Nuxt e sincronizza i file con le piattaforme native.

Costruire e Distribuire Applicazioni Native

Per costruire e distribuire la tua applicazione mobile nativa, segui questi passaggi:

Per sviluppare app iOS, hai bisogno di Xcode installato, e per app Android, hai bisogno di Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, hai bisogno di iscriverti al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

Apri i progetti nativi:

Per iOS:

bun run mobile:ios

Per Android:

bun run mobile:android

Ora direttamente con Capacitor CLI:

bunx cap open ios
bunx cap open android

Costruisci e esegui l'app:

android-studio-run

In Android Studio, attendi che il progetto sia pronto, e poi clicca sul pulsante “Esegui” per distribuire l'app su un dispositivo o emulatore collegato.

xcode-run

In Xcode, configura il tuo account di firma per distribuire l'app su un dispositivo reale. Se non l'hai fatto prima, Xcode ti guiderà attraverso il processo (nota che devi essere iscritto al programma sviluppatore di Apple). Una volta configurato, clicca sul pulsante “Play” per eseguire l'app sul tuo dispositivo collegato.

Congratulazioni! Hai avuto successo nel distribuire la tua app web Nuxt su un dispositivo mobile.

Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo…

Capacitor Live Reload

Durante lo sviluppo, puoi sfruttare il live reloading per vedere i cambiamenti istantaneamente sul tuo dispositivo mobile. Per abilitare questa funzionalità, segui questi passaggi:

Trova l'indirizzo IP locale:

Eseguire il seguente comando nel terminale:
```
ipconfig getifaddr en0
```
Eseguire:
```
ipconfig
```
Cercare l'indirizzo IPv4 nell'output.

Aggiornare il tuo capacitor.config.ts per puntare al tuo server di sviluppo:

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;

Sostituire YOUR_IP_ADDRESS con l'indirizzo IP locale (ad esempio, 192.168.1.100).

Applicare le modifiche al tuo progetto nativo:

bunx cap copy

Il comando copy copia il folder web e le modifiche di configurazione nel progetto nativo senza aggiornare l'intero progetto.

Avviare il tuo server di sviluppo Nuxt e ricostruire in Xcode/Android Studio:

bun run dev

Ora, ogni volta che apporti modifiche al tuo app Nuxt, l'app mobile si ricaricherà automaticamente per riflettere quelle modifiche.

Nota: Se installi nuovi plugin o modifica i file nativi, avrai bisogno di ricostruire il progetto nativo poiché la ricarica in tempo reale si applica solo ai cambiamenti web code.

Utilizzo dei Capacitor Plugins

I Capacitor plugin ti consentono di accedere alle funzionalità del dispositivo nativo dal tuo'app Nuxt. Esploriamo come utilizzare il Plugin di condivisione come esempio:

Installa il plugin di condivisione:

bun add @capacitor/share

Crea o aggiorna una pagina per utilizzare il plugin di condivisione. In Nuxt 4, le pagine vanno in 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>

Sincronizza le modifiche con il progetto nativo:

bun run mobile

O sincronizza senza ricostruire:

bunx cap sync

Ricostruisci e esegui l'app sul tuo dispositivo.

Ora, quando clicchi sul pulsante “Condividi ora!”, apparirà il dialogo di condivisione nativo.

Aggiungi Konsta UI v5 con Tailwind CSS 4

Per rendere il pulsante più mobile-friendly, puoi aggiungere Konsta UI per componenti nativi iOS e Android.

Hai bisogno di Tailwind CSS 4 già installato.

Installa i pacchetti richiesti:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Configura il plugin Vite in 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()],
  },
});

Crea app/assets/css/main.css:

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

Avvolgi la tua app con il componente Konsta UI in App Aggiorna la tua pagina per utilizzare componenti Konsta UI: app/app.vue:

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

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

Aggiungi il font Roboto per tema Material Design in

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

La tua app Nuxt dovrebbe ora avere un'interfaccia utente mobile nativa: 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
});

__CAPGO_KEEP_0__

Conclusion

Hai avuto successo nel convertire la tua applicazione web esistente Nuxt in app native per iOS e Android utilizzando Capacitor 8. Il tuo codice Vue adesso funziona nativamente su dispositivi mobili con accesso agli API del dispositivo.

Cosa hai ottenuto:

Configurato Nuxt per la generazione statica
Aggiunto Capacitor 8 con plugin essenziali
Costruito e distribuito su simulatori iOS e Android
Abilitato il live reload per lo sviluppo
Aggiunto optionalmente Konsta UI per componenti che assomigliano a quelli nativi

Passaggi successivi:

Configurazione Capgo per aggiornamenti in rete senza la riconferma della store
Aggiungi più plugin nativi come Camera, Geolocalizzazione o Notifiche Push
Configura icone e schermate di avvio per la produzione
Prepara la tua app per la sottoscrizione di App Store e Google Play

Stai iniziando un nuovo progetto? Controlla Creazione di un'app mobile Nuxt da zero per una guida passo dopo passo.

Risorse

Impara come Capgo può aiutarti a creare applicazioni migliori in modo più veloce, iscrivi un account gratuito oggi.

Continua con Converti la tua App Nuxt in iOS & Android con Capacitor 8

Se stai utilizzando Converti la tua App Nuxt in iOS & Android con Capacitor 8 per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto in Capgo Directory dei Plugin, Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo, Aggiungere o Aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise Ionic per il workflow del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Costruzioni Native per il workflow del prodotto in Capgo Costruzioni Native.