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 des plugins natifs essentiels
Construisez et testez sur les simulateurs iOS et Android
Activez la rechargement en direct pour un développement plus rapide
Optionnellement ajoutez Konsta UI pour des composants ressemblant à des composants natifs

Souhaitez-vous démarrer un nouveau projet à partir de zéro ? Consultez notre guide sur La création d'une application mobile Nuxt à partir de zéro.

Avantages de l'utilisation de Nuxt et de Capacitor

La reutilisabilité de Code : Partagez 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éder aux fonctionnalités de l'appareil comme la caméra, la géolocalisation et le système de fichiers à travers Capacitor plugins.
Développement simplifié: Utiliser des modèles Vue/Nuxt familiers sans apprendre le développement natif.

Prérequis

Avant de commencer, assurez-vous d'avoir :

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

Configurer 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 assembler dans l'application native.

Assurez-vous que votre package.json a 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 serveur, etc.), vous devrez les réécrire 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 dossier avec vos fichiers statiques. C'est ce que __CAPGO_KEEP_0__ rassemblera dans votre application native. .output/public C'est ce que Capacitor rassemblera dans votre application native.

Ajouter Capacitor 8 à votre projet

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

Installez le noyau de Capacitor 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/app: Gérer les événements de cycle de vie de l'application (avant-plan/arrière-plan, liens profonds)
@capacitor/keyboard: Contrôler le comportement de la touche sur les appareils mobiles
@capacitor/splash-screen: Gérer l'écran de splash natif
@capacitor/status-bar: Personnaliser la barre d'état du dispositif
@capacitor/preferences: Stockage de valeurs clés (comme localStorage mais natif)

Initialisez 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 et com.example.myapp par l'ID de votre application (notation de domaine inversé).

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 plateforme native :

bunx cap add ios
bunx cap add android

Capacitor créera ios et android des dossiers à la racine de votre projet contenant les projets natifs.

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

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.

Ouvrez 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 un é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 "Play" 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.

Mettre à jour votre capacitor.config.ts pour pointer 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 reconstruire 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.

Remarque : Si vous installez de nouveaux plugins ou apportez des modifications à des fichiers natifs, vous devrez reconstruire le projet natif car la rechargement en temps réel ne s'applique qu'aux modifications web code.

Utilisation des Capacitor plugins

Capacitor plugins vous permettent d'accéder aux fonctionnalités de votre appareil mobile depuis votre application Nuxt. Explorons comment utiliser les Partager plugin par exemple :

Installer le plugin Partager :

bun add @capacitor/share

Créez ou mettez à jour une page pour utiliser le plugin Partager. 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.

Ajouter 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 l'interface utilisateur Konsta App 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 les 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 utilisateur mobile native :

Conclusion

Vous avez réussi à convertir votre application web existante Nuxt en applications natives iOS et Android en utilisant Capacitor 8. Votre code Vue fonctionne maintenant nativement sur les appareils mobiles avec accès aux API de périphérique.

Ce que vous avez accompli :

Configuré Nuxt pour la génération statique
Ajouté Capacitor 8 avec des plugins essentiels
Construit et déployé sur les simulateurs iOS et Android
Activé le rechargement en direct pour le développement
Ajouté optionnellement Konsta UI pour des composants ressemblant à l'interface native

Étapes suivantes :

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

Débuter un nouveau projet ? Consultez Créer une application mobile Nuxt à partir de zéro pour une présentation guidée.

Ressources

Découvrez comment Capgo peut vous aider à créer des applications meilleures et plus rapides, inscrivez-vous pour un compte gratuit aujourd'hui.

Convertissez votre application Nuxt en iOS &amp; Android avec Capacitor 8