Convertissez votre application Nuxt en iOS & Android avec Capacitor 8

Introduction

Avez-vous une application web Nuxt existante ? Dans ce guide, vous apprendrez à la transformer en applications mobiles natives iOS et Android en utilisant Capacitor 8 — la dernière version avec une meilleure performance et de nouvelles fonctionnalités.

Capacitor enveloppe votre application web dans un conteneur natif, vous donnant accès aux API de l'appareil comme la caméra, le système de fichiers et les notifications push tout en conservant votre codebase Vue existant. Contrairement à Flutter ou React Native, vous n'avez pas besoin de réécrire quoi que ce soit — votre Nuxt code fonctionne tel quel.

Ce que vous allez apprendre :

Configurez votre application Nuxt existante pour la génération statique
Ajoutez Capacitor 8 avec les plugins natifs essentiels
Construisez et testez sur les simulateurs iOS et Android
Activez la reprise en direct pour un développement plus rapide
Optionnellement ajoutez Konsta UI pour des composants à l'air natif

Vous cherchez à démarrer un nouveau projet à partir de zéro ? Consultez notre guide sur Créer une application mobile Nuxt à partir de zéro.

Les avantages de l'utilisation de Nuxt et Capacitor

La réutilisabilité de CodePartagez vos composants Vue et votre logique entre les applications web et mobiles.
Performances : La génération statique de Nuxt crée des bundles optimisés parfaits pour les appareils mobiles.
Capacités natives : Accédez aux fonctionnalités de l'appareil comme la caméra, la géolocalisation et le système de fichiers à travers les plugins Capacitor.
Développement simplifié : Utilisez les modèles Vue/Nuxt familiers sans apprendre le développement natif.

Prérequis

Avant de commencer, assurez-vous d'avoir :

Node.js 18+ installé
Une application existante Nuxt 4 application
Xcode (pour le développement iOS, macOS uniquement)
Android Studio (pour le développement Android)

Configuration de votre application Nuxt pour les appareils mobiles

Le premier pas consiste à configurer votre application Nuxt pour la génération statique. Capacitor nécessite des fichiers HTML/JS/CSS statiques pour les bundler dans l'application native.

Assurez-vous que votre package.json possède le script de génération :

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

Important : Si vous utilisez des fonctionnalités côté serveur (API routes, middleware de serveur, etc.), vous devrez refacturer celles-ci pour utiliser des alternatives côté client ou des API externes.

Testez la génération statique en exécutant :

bun run generate

Vous devriez voir un .output/public dossier contenant vos fichiers statiques. C'est ce que Capacitor bundlera dans votre application native.

Intégrer Capacitor 8 à Votre Projet

Pour emballer votre application Nuxt dans un conteneur mobile natif, suivez ces étapes :

Installez Capacitor core et CLI :

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

Installez les plugins Capacitor courants que vous aurez probablement besoin :

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

Ces plugins fournissent des fonctionnalités essentielles :

@capacitor/appGérer les événements de cycle d'application (avant-plan/arrière-plan, liens profonds)
@capacitor/clavierGérer le comportement du clavier sur les appareils mobiles
@capacitor/écran de démarrageGérer l'écran de démarrage natif
@capacitor/barre d'étatPersonnaliser la barre d'état de l'appareil
@capacitor/préférencesStockage de valeurs clés-valeurs (comme localStorage mais natif)

Initialiser Capacitor avec les détails de votre projet :

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

Remplacez my-app par le nom de votre application com.example.myapp avec votre ID d'application (notation de domaine inversée).

Créez ou mettez à jour le capacitor.config.ts fichier avec la configuration appropriée :

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;

Installez les plateformes natives :

bun add @capacitor/ios @capacitor/android

Ajoutez les dossiers de plateformes natives :

bunx cap add ios
bunx cap add android

Capacitor créera ios et android dossiers au niveau de votre projet contenant les projets natives.

Pour construire le projet Android, vous avez besoin de Android Studio. Pour iOS, vous avez besoin d'un Mac avec Xcode.

Construire et synchroniser votre projet :

bun run mobile

Cela exécute votre script personnalisé qui génère la mise en page statique Nuxt et synchronise les fichiers avec les plateformes natives.

Construire et Déployer des Applications Natives

Pour construire et déployer votre application mobile native, suivez ces étapes :

Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez distribuer votre application sur l'App Store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.

Ouvrir les projets natifs :

Pour iOS :

bun run mobile:ios

Pour Android :

bun run mobile:android

Ou directement avec Capacitor CLI:

bunx cap open ios
bunx cap open android

Construire et exécuter l'application :

android-studio-run

Dans Android Studio, attendez que le projet soit prêt, puis cliquez sur le bouton « Exécuter » pour déployer l'application sur un appareil connecté ou émulateur.

xcode-run

Dans Xcode, configurez votre compte de signature pour déployer l'application sur un appareil réel. Si vous n'avez pas déjà effectué cela, Xcode vous guidera tout au long du processus (notez que vous devez être inscrit dans le programme Apple Developer). Une fois configuré, cliquez sur le bouton « Jouer » pour exécuter l'application sur votre appareil connecté.

Félicitations ! Vous avez réussi à déployer votre application web Nuxt sur un appareil mobile.

Mais attendez, il existe également un moyen plus rapide de procéder pendant le développement…

Capacitor Live Reload

Pendant le développement, vous pouvez profiter de la mise à jour en temps réel pour voir les changements instantanément sur votre appareil mobile. Pour activer cette fonctionnalité, suivez ces étapes :

Trouvez votre adresse IP locale :

Sur macOS, exécutez la commande suivante dans le terminal :
```
ipconfig getifaddr en0
```
Sur Windows, exécutez :
```
ipconfig
```
Recherchez l'adresse IPv4 dans la sortie.

Met à jour votre capacitor.config.ts pour qu'il pointe vers votre serveur de développement :

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;

Remplacez YOUR_IP_ADDRESS par votre adresse IP locale (par exemple, 192.168.1.100).

Appliquez les modifications à votre projet natif :

bunx cap copy

La copy commande copie le dossier web et les modifications de configuration dans le projet natif sans mettre à jour l'ensemble du projet.

Démarrer votre serveur de développement Nuxt et rebuild dans Xcode/Android Studio :

bun run dev

Maintenant, chaque fois que vous apportez des modifications à votre application Nuxt, l'application mobile se rechargera automatiquement pour refléter ces modifications.

Note: Si vous installez de nouveaux plugins ou modifiez des fichiers natifs, vous devrez reconstruire le projet natif car la rechargement en direct ne s'applique qu'aux modifications web code.

Utilisation des plugins Capacitor

Les plugins Capacitor vous permettent d'accéder aux fonctionnalités de votre appareil natif depuis votre application Nuxt. Explorons comment utiliser le Plugin de partage comme exemple :

Installez le plugin de partage :

bun add @capacitor/share

Créez ou mettez à jour une page pour utiliser le plugin de partage. Dans Nuxt 4, les pages se trouvent dans 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>

Synchronisez les modifications avec le projet natif :

bun run mobile

Ou synchronisez simplement sans reconstruire :

bunx cap sync

Reconstruirez et exécutez l'application sur votre appareil.

Maintenant, lorsque vous cliquez sur le bouton « Partager maintenant ! », le dialogue de partage natif s'affichera.

Intégrer Konsta UI v5 avec Tailwind CSS 4

Pour rendre le bouton plus mobile-friendly, vous pouvez ajouter Konsta UI pour des composants iOS et Android natifs.

Vous devez avoir Tailwind CSS 4 déjà installé.

Installez les packages requis :

bun add konsta
bun add tailwindcss @tailwindcss/vite

Configurez le plugin Vite dans 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()],
  },
});

Créer app/assets/css/main.css:

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

Enveloppez votre application avec Konsta UI App composant dans app/app.vue:

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

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

Mettez à jour votre page pour utiliser des composants 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>

Ajoutez la police Roboto pour le thème de conception matérielle dans 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
});

Votre application Nuxt devrait maintenant avoir une interface mobile native :

Conclusion

Vous avez réussi à convertir votre application web existante Nuxt en applications natives iOS et Android à l'aide de Capacitor 8. Votre codebase Vue fonctionne maintenant nativement sur les appareils mobiles avec accès aux API de l'appareil.

Ce que vous avez accompli :

Configuré Nuxt pour la génération statique
Ajouté Capacitor 8 avec des plugins essentiels
Construit et déployé vers les simulateurs iOS et Android
Activé la reprise en direct pour le développement
Ajouté facultativement Konsta UI pour des composants à l'air natif

Étapes suivantes :

Configurer Capgo pour les mises à jour hors ligne sans résubmission de l'application sur l'app store
Ajoutez plus de plugins natifs comme la Caméra, la Géolocalisation ou les Notifications Push
Configurez les icônes et les écrans de démarrage de l'application pour la production
Préparez votre application pour la soumission sur l'App Store et Google Play

En créant une nouvelle application ? Consultez Créer une application mobile Nuxt à partir de zéro pour une présentation guidée.

Ressources

Apprenez comment Capgo peut vous aider à créer des applications meilleures et plus rapides, s'inscrire à un compte gratuit aujourd'hui.

Continuez à partir de Convertir votre application Nuxt en iOS & Android avec Capacitor 8

Si vous utilisez Convertir votre application Nuxt en iOS & Android avec Capacitor 8 pour planifier le travail de plugin natif, connectez-le avec Répertoire de plugins Capgo pour le flux de travail du produit dans Répertoire de plugins Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans l'ajout ou la mise à jour de plugins Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans Alternatives de plugins d'entreprise Ionic, et Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs.