📱 @poups/nuxt3-capacitor

🇺🇸 English

An interactive npm package to configure Capacitor with Android and/or iOS for Nuxt/SPA projects.
Script with modern colored interface and interactive platform selection.

✨ Features

• 🎯 Single command with interactive platform selection
• 🧹 Smart cleanup : targeted deletion per platform
• 🔄 Auto-detection : checks for existing installations
• ⚙️ Automated configuration : generates capacitor.config.ts
• 🔨 Auto build & sync : npm run generate + npx cap sync
• 🎨 Modern interface : colored display with emojis and banners
• 📱 Cross-platform : supports Android and/or iOS

📦 Installation

Global installation (recommended)

npm install -g @poups/nuxt3-capacitor

Then use the command directly:

capacitor-setup

Local installation

# In your project
npm install --save-dev @poups/nuxt3-capacitor

# Then use with npx
npx capacitor-setup

🚀 Usage

capacitor-setup - Interactive Configuration

Main script to configure your mobile platforms with interactive selection:

capacitor-setup

The script will let you choose:

• 📱 Android only
• 🍎 iOS only
• 🚀 Android + iOS (complete cross-platform)

Advanced features:

• Manage existing installations
• Targeted cleanup options per platform
• Interactive app configuration (name + bundle ID)
• Detection and preservation of existing platforms

🔍 Diagnostic système

Vérifiez votre environnement de développement avant la configuration :

capacitor-setup --diagnostic
# ou
capacitor-setup --check
# ou
capacitor-setup -d

Le diagnostic vérifiera :

• Environnement général : Node.js, npm, Git
• Développement Android : Java/JDK, Android SDK, ADB, Android Studio
• Développement iOS : Xcode, simulateurs iOS (macOS uniquement)
• Capacitor : Packages du projet et configuration

📋 What the script does

1. 🔍 Detection : Checks existing Capacitor installations
2. 🧹 Cleanup : Targeted deletion options per platform
3. 📱 Selection : Interactive choice of platforms (Android/iOS/both)
4. 📝 Configuration : Interactive input for app name and bundle ID
5. 📦 Installation : npm install Capacitor dependencies
6. ⚙️ Config : Generate/update capacitor.config.ts
7. 🚀 Platforms : npx cap add android/ios based on selection
8. 🔨 Build : npm run generate to create .output/public
9. 🔄 Sync : npx cap sync to synchronize with platforms
10. ✅ Finalization : Display launch commands

📁 Generated structure

your-project/
├── android/              # Android Studio project (if selected)
├── ios/                  # Xcode project (if selected)
├── capacitor.config.ts   # Capacitor configuration
├── .output/public/       # Your SPA build
└── node_modules/         # Capacitor dependencies

🎨 Interface

The script displays a colored interface with:

• 🎯 Stylized ASCII banners
• 📱🍎 Emojis for each platform
• 🔥 Color codes for actions (green=success, red=error, etc.)
• 📋 Interactive numbered menus
• ✅ Real-time feedback

🔧 Generated configuration

The script automatically creates an optimized capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your-app.mobile',
  appName: 'Your App',
  webDir: '.output/public',
  server: {
    androidScheme: 'https',
    iosScheme: 'ionic'
  },
  android: {
    allowMixedContent: true
  },
  ios: {
    allowsLinkPreview: false
  }
};

export default config;

🚨 Error handling

The script includes a robust error handling system:

• 🧹 Automatic cleanup on failure
• 📊 Tracking of created resources
• 🔄 Restoration to initial state if needed
• 💬 Explicit error messages in multiple languages

📄 License

MIT

👨‍💻 Author

Sebastien Poupineau

💡 Tips:

• The script offers targeted cleanup options (Android only, iOS only, or both)
• Keep Android Studio and Xcode closed during installation
• The script automatically preserves non-selected platforms during updates

🇫🇷 Français

Un package npm interactif pour configurer Capacitor avec Android et/ou iOS pour projets Nuxt/SPA.
Script avec interface colorée moderne et sélection interactive des plateformes.

✨ Fonctionnalités

• 🎯 Une commande unique avec sélection interactive des plateformes
• 🧹 Nettoyage intelligent : suppression ciblée par plateforme
• 🔄 Détection automatique : vérification des installations existantes
• ⚙️ Configuration automatisée : génération de capacitor.config.ts
• 🔨 Build & sync automatique : npm run generate + npx cap sync
• 🎨 Interface moderne : affichage coloré avec émojis et bannières
• 📱 Cross-platform : support Android et/ou iOS

📦 Installation

Installation globale (recommandée)

npm install -g @poups/nuxt3-capacitor

Puis utilisez la commande directement :

capacitor-setup

Installation locale

# Dans votre projet
npm install --save-dev @poups/nuxt3-capacitor

# Puis utilisez avec npx
npx capacitor-setup

🚀 Utilisation

capacitor-setup - Configuration interactive

Script principal pour configurer vos plateformes mobiles avec sélection interactive :

capacitor-setup

Le script vous permettra de choisir :

• 📱 Android uniquement
• 🍎 iOS uniquement
• 🚀 Android + iOS (cross-platform complet)

Fonctionnalités avancées :

• Gestion des installations existantes
• Options de nettoyage ciblé par plateforme
• Configuration interactive de l'app (nom + bundle ID)
• Détection et préservation des plateformes existantes

🔍 Diagnostic système

Vérifiez votre environnement de développement avant la configuration :

capacitor-setup --diagnostic
# ou
capacitor-setup --check
# ou
capacitor-setup -d

Le diagnostic vérifiera :

• Environnement général : Node.js, npm, Git
• Développement Android : Java/JDK, Android SDK, ADB, Android Studio
• Développement iOS : Xcode, simulateurs iOS (macOS uniquement)
• Capacitor : Packages du projet et configuration

📋 Ce que fait le script

1. 🔍 Détection : Vérifie les installations Capacitor existantes
2. 🧹 Nettoyage : Options de suppression ciblée par plateforme
3. 📱 Sélection : Choix interactif des plateformes (Android/iOS/les deux)
4. 📝 Configuration : Saisie interactive du nom d'app et bundle ID
5. 📦 Installation : npm install des dépendances Capacitor
6. ⚙️ Config : Génération/mise à jour de capacitor.config.ts
7. 🚀 Platforms : npx cap add android/ios selon sélection
8. 🔨 Build : npm run generate pour créer .output/public
9. 🔄 Sync : npx cap sync pour synchroniser avec les plateformes
10. ✅ Finalisation : Affichage des commandes de lancement

📁 Structure générée

votre-projet/
├── android/              # Projet Android Studio (si sélectionné)
├── ios/                  # Projet Xcode (si sélectionné)
├── capacitor.config.ts   # Configuration Capacitor
├── .output/public/       # Build de votre SPA
└── node_modules/         # Dépendances Capacitor

🎨 Interface

Le script affiche une interface colorée avec :

• 🎯 Bannières ASCII stylisées
• 📱🍎 Émojis pour chaque plateforme
• 🔥 Codes couleur pour les actions (vert=succès, rouge=erreur, etc.)
• 📋 Menus interactifs numérotés
• ✅ Feedback en temps réel

🔧 Configuration générée

Le script crée automatiquement un capacitor.config.ts optimisé :

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.votre-app.mobile',
  appName: 'Votre App',
  webDir: '.output/public',
  server: {
    androidScheme: 'https',
    iosScheme: 'ionic'
  },
  android: {
    allowMixedContent: true
  },
  ios: {
    allowsLinkPreview: false
  }
};

export default config;

🚨 Gestion d'erreurs

Le script inclut un système robuste de gestion d'erreurs :

• 🧹 Cleanup automatique en cas d'échec
• 📊 Tracking des ressources créées
• 🔄 Restauration de l'état initial si nécessaire
• 💬 Messages d'erreur explicites en plusieurs langues

📄 Licence

MIT

👨‍💻 Auteur

Sebastien Poupineau

💡 Conseils :

• Le script propose des options de nettoyage ciblé (Android seul, iOS seul, ou les deux)
• Gardez Android Studio et Xcode fermés pendant l'installation
• Le script préserve automatiquement les plateformes non sélectionnées lors des mises à jour