This course is in beta. Only the beginner tracks are written so far, and content may still change. Found a mistake or something unclear? Open an issue on GitHub - feedback is very welcome.
Section 1 of 9

How ExApp frontend API calls work

In a PHP Nextcloud app, you use @nextcloud/axios because it automatically attaches the requesttoken CSRF header that Nextcloud requires for state-changing requests.

ExApps don't need this. When your Vue code makes an API call, it goes through the AppAPI proxy at /apps/app_api/proxy/pinboard_python/.... AppAPI handles authentication at the proxy level using the session cookie of the logged-in user — it validates who the user is and passes that information to your FastAPI server via the AUTHORIZATION-APP-API header. Your Vue code just uses plain axios.

// ✅ ExApp — plain axios through the AppAPI proxy
import axios from 'axios'
import { generateUrl } from '@nextcloud/router'
import { APP_API_PROXY_URL_PREFIX, EX_APP_ID } from './constants/AppAPI.js'

await axios.get(generateUrl(`${APP_API_PROXY_URL_PREFIX}/${EX_APP_ID}/pins`))

// ❌ Not needed for ExApps — @nextcloud/axios is for PHP apps
import axios from '@nextcloud/axios'

Everything else — NcAppContent, NcEmptyContent, NcButton, NcModal, NcTextField, CSS variables, @nextcloud/dialogs for toasts — is identical to a standard Nextcloud Vue app.