Capacitor with Vue

Vue-specific patterns and best practices for Capacitor app development — Composition API, composables, reactivity, lifecycle hooks, Vue Router integration, and framework-specific guidance for Quasar and Nuxt.

Prerequisites

1. Capacitor 6, 7, or 8 app with Vue 3.
2. Node.js and npm installed.
3. For iOS: Xcode installed.
4. For Android: Android Studio installed.

Agent Behavior

• Auto-detect before asking. Check the project for vite.config.ts, vite.config.js, quasar.config.js, quasar.config.ts, nuxt.config.ts, package.json, capacitor.config.ts or capacitor.config.json, and existing directory structure. Only ask the user when something cannot be detected.
• Guide step-by-step. Walk the user through the process one step at a time.
• Detect the meta-framework. Determine whether the project uses plain Vue (Vite), Quasar, or Nuxt, and adapt instructions accordingly.

Procedures