Guide for integrating modern web frameworks with Capacitor. Covers Next.js static export, React, Vue, Angular, Svelte, and others. Use this skill when converting framework apps to mobile apps with Capacitor.

Framework to Capacitor Integration Comprehensive guide for integrating web frameworks with Capacitor to build mobile apps. When to Use This Skill Converting a Next.js app to a mobile app Integrating React, Vue, Angular, or Svelte with Capacitor Configuring static exports for Capacitor Setting up routing for mobile apps Optimizing framework builds for native platforms Live Project Snapshot Detected framework and build dependencies: ! node e "const fs=require('fs');if(!fs.existsSync('package.json'))process.exit(0);const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));const matchers=['next','react','vue','@angular/core','@sveltejs/kit','@builder.io/qwik','@remix run/react','solid js','vite','@capacitor/core','@capacitor/cli'];const out=[];for(const section of ['dependencies','devDependencies']){for(const [name,version] of Object.entries(pkg[section] {})){if(matchers.includes(name))out.push(section+'.'+name+'='+version)}}for(const [name,cmd] of Object.entries(pkg.scripts {})){if(['build','export','sync','cap:sync'].includes(name))out.push('scripts.'+name+'='+cmd)}console.log(out.join('\n'))" Relevant framework and Capacitor config paths: ! find . maxdepth 3 \( name 'next.config.js' o name 'next.config.mjs' o name 'vite.config.ts' o name 'vite.config.js' o name 'angular.json' o name 'svelte.config.js' o name 'capacitor.config.json' o name 'capacitor.config.ts' o name 'capacitor.config.js' \) Framework Support Matrix Framework Static Export SSR Support Recommended Approach Next.js ✅ Yes ❌ No Static export (output: 'export') React ✅ Yes N/A Create React App or Vite Vue ✅ Yes ❌ No Vite or Vue CLI Angular ✅ Yes ❌ No Angular CLI Svelte ✅ Yes ❌ No SvelteKit with adapter static Remix ✅ Yes ❌ No SPA mode Solid ✅ Yes ❌ No Vite Qwik ✅ Yes ❌ No Static site mode CRITICAL : Capacitor requires static HTML/CSS/JS files . SSR (Server Side Rendering) does not work in native apps. Next.js + Capacitor Next.js is popular for React apps. Capacitor requires static export. Step 1: Create or Update next.config.js For Next.js 13+ (App Router): For Next.js 12 (Pages Router): Step 2: Build Static Files This creates an out/ directory with static files. Step 3: Install Capacitor Configuration: App name : Your app name App ID : com.company.app Web directory : out (Next.js static export output) Step 4: Configure Capacitor Create capacitor.config.ts: Step 5: Add Platforms Step 6: Build and Sync Step 7: Run on Device iOS: Android: Next.js Routing Considerations Use hash routing for complex apps: Or use Next.js's built in routing (works with trailingSlash: true ). Next.js Image Optimization next/image doesn't work with static export. Use alternatives: Option 1: Use standard img tag Option 2: Use a custom Image component Next.js API Routes API routes don't work in static export. Use alternatives: 1. External API : Call a separate backend 2. Capacitor plugins : Use native features 3. Local storage : Use @capacitor/preferences Next.js Middleware Middleware doesn't work in static export. Handle logic client side: Complete Next.js + Capacitor Example package.json: React + Capacitor React works great with Capacitor using Vite or Create React App. Option 1: Vite (Recommended) Create new project: Install Capacitor: Configure vite.config.ts: capacitor.config.ts: Add platforms and build: Option 2: Create React App Create new project: Install Capacitor: capacitor.config.ts: Build and sync: React Router Configuration Use HashRouter for mobile: Vue + Capacitor Vue works seamlessly with Capacitor. Create Vue + Capacitor Project Using Vite: Install Capacitor: vite.config.ts: capacitor.config.ts: Add platforms: Vue Router Configuration Use hash mode for mobile: Angular + Capacitor Angular has excellent Capacitor integration. Create Angular + Capacitor Project Create Angular app: Install Capacitor: capacitor.config.ts: For Angular 16 and below: Add platforms: Angular Router Configuration HashLocationStrategy for mobile: For Angular 16 and below: Svelte + Capacitor Svelte and SvelteKit work great with Capacitor. SvelteKit + Capacitor Create SvelteKit app: Install adapter static: Configure svelte.config.js: Install Capacitor: capacitor.config.ts: Build and sync: Vite + Svelte (Simpler Option) Create with Vite: Install Capacitor: capacitor.config.ts: Common Patterns Across Frameworks 1. Environment Detection Detect if running in native app: 2. Deep Linking Handle deep links in your app: 3. Live Updates with Capgo Add live updates to any framework: 4. Native UI Components Use Ionic Framework for any framework: React: Vue: Angular: 5. Storage Use Capacitor Preferences for all frameworks: 6. Camera Access Same API across all frameworks: Build Scripts for All Frameworks Add these to package.json: Routing Best Practices Hash vs. History Mode Hash mode (recommended for mobile): Works without server configuration URLs look like: /about No server side routing needed History mode (requires server): Clean URLs: /about Requires server fallback to index.html Can have issues on mobile Recommendation : Use hash mode for Capacitor apps. Common Issues and Solutions Issue: Blank Screen on Mobile Cause : Incorrect webDir or build output. Solution: 1. Check build output directory matches webDir in capacitor.config.ts 2. Rebuild: npm run build 3. Sync: npx cap sync 4. Check browser console in device Issue: Routing Doesn't Work Cause : Using history mode without proper configuration. Solution: Switch to hash routing: React: HashRouter Vue: createWebHashHistory() Angular: HashLocationStrategy SvelteKit: Configure fallback Issue: Environment Variables Not Working Cause : Build time variables not being replaced. Solution: Use framework specific env variable patterns: Next.js: NEXT PUBLIC Vite: VITE Create React App: REACT APP Angular: environment.ts Issue: API Calls Fail on Device Cause : CORS or localhost URLs. Solution: 1. Use production API URLs 2. Configure CORS on backend 3. Use Capacitor HTTP plugin for native requests: Framework Specific Plugins Ionic Framework provides native UI components: @ionic/react React components @ionic/vue Vue components @ionic/angular Angular components Konsta UI for Tailwind CSS: Works with React, Vue, Svelte iOS and Material Design themes See ionic design and konsta ui skills for details. Deployment Checklist [ ] Configure static export (Next.js: output: 'export' ) [ ] Set correct webDir in capacitor.config.ts [ ] Use hash routing for mobile [ ] Disable image optimization (Next.js) [ ] Remove SSR/API routes dependencies [ ] Add native permissions (Info.plist, AndroidManifest.xml) [ ] Test on physical devices [ ] Configure splash screen and icons [ ] Set up live updates with Capgo (optional) [ ] Build and test on iOS and Android Resources Capacitor Docs : https://capacitorjs.com/docs Next.js Static Export : https://nextjs.org/docs/app/building your application/deploying/static exports Ionic Framework : https://ionicframework.com Capgo Blog : https://capgo.app/blog Community Forum : https://forum.ionicframework.com Framework Specific Guides For detailed guides on specific frameworks: Next.js + Capacitor : https://capgo.app/blog/how to use capacitor with nextjs Ionic Framework : See ionic design skill Konsta UI : See konsta ui skill Next Steps 1. Choose your framework and follow the setup above 2. Configure static export/build 3. Install and configure Capacitor 4. Add platforms (iOS/Android) 5. Build and sync 6. Test on devices 7. Add native features with plugins 8. Set up live updates with Capgo

framework-to-capacitor