Fetch Requests Fail in Native Ionic/Capacitor Apps

[victorfds]

🐛 The bug

I am encountering an issue where $fetch requests to server API routes (e.g., /api/...) fail when running a Nuxt.js application integrated with Ionic and Capacitor on native mobile devices (iOS/Android). The same requests work perfectly in the web browser but consistently fail in the native environment, preventing API communication within the app.

This problem appears to stem from how the Ionic/Capacitor integration handles relative URL resolutions or network requests in the native WebView, potentially due to mismatches in server URL configuration, CORS restrictions, or network access issues specific to Capacitor.

Environment

• Nuxt.js Version: [3.15.4]
• nuxt-ionic Version: [latest]
• Capacitor Version: [7.0.0]
• Platform: iOS/Android (tested on emulator/device)
• Node.js Version: [LTS]

Screenshots

Here is a screenshot of the app in its current state, showing the Tab 1 content where the $fetch issue occurs:

Proposed Solution (Optional)

It would be helpful if the nuxt-ionic module could provide guidance or built-in support for configuring $fetch to work seamlessly in native Capacitor environments, potentially by:

• Automatically resolving relative API URLs to the correct server origin.
• Including documentation or examples for handling network requests in native apps.
• Ensuring compatibility with Capacitor’s network settings or WebView behavior.

I would appreciate any assistance or insights the maintainers can provide to resolve this issue.
Thank you!

🛠️ To reproduce

https://stackblitz.com/edit/github-vkhi2x3r?file=pages%2Ftabs%2Ftab1%2Findex.vue

Steps to Reproduce

1. Clone or open the reproduction code provided in this StackBlitz: https://stackblitz.com/edit/github-vkhi2x3r?file=pages%2Ftabs%2Ftab1%2Findex.vue
2. Set up a Nuxt.js project with the nuxt-ionic module, following the documentation.
3. Configure Capacitor for iOS or Android and build the app.
4. Attempt to make a $fetch call (e.g., to /api/info) from a page or component, such as the Tab 1 page shown in the reproduction code.
5. Observe that the request fails on the native device/emulator but works in the web browser.

🌈 Expected behaviour

• $fetch('/api/info') should successfully communicate with the Nuxt server API, returning a valid response in both web and native environments.

ℹ️ Additional context

• I have tried configuring the capacitor.config.ts with server.hostname and server.url, but the problem persists.
• The issue does not occur in the web browser, indicating a native-specific configuration or compatibility problem with Ionic/Capacitor.