API Reference
Composables
Client-side composables for App Bridge and authenticated fetch.
useAppBridge()
Returns the typed ShopifyGlobal from the App Bridge CDN. Auto-imported in your Vue components.
Signature
function useAppBridge(): ShopifyGlobal
Behavior
- Safe to call anywhere — returns a lazy proxy that defers property access
- Server-side: Returns a proxy that throws with a helpful message when any property is accessed
- Client-side (outside iframe): Returns a proxy that throws when any property is accessed
- Client-side (inside Shopify Admin): Returns the real
window.shopifyobject
Example
<script setup>
const shopify = useAppBridge()
onMounted(async () => {
// Show a toast
shopify.toast.show('Hello from App Bridge!')
// Get a session token
const token = await shopify.idToken()
// Open a resource picker
const selected = await shopify.resourcePicker({ type: 'product' })
})
</script>
Available APIs
The ShopifyGlobal type provides access to all App Bridge APIs:
| API | Description |
|---|---|
shopify.toast | Show toast notifications |
shopify.resourcePicker | Open product/collection pickers |
shopify.idToken() | Get a session token |
shopify.loading() | Control the admin loading bar |
shopify.modal | Show/hide App Bridge modals |
shopify.config | App configuration (shop, locale) |
useShopifyFetch()
Fetch wrapper that automatically includes the Shopify session token in the Authorization header.
Session tokens are only available on the client via App Bridge. When using
useShopifyFetch() inside useAsyncData, you must pass { server: false } so the fetch runs in the browser where App Bridge can provide a token.Signature
async function useShopifyFetch<T>(
url: string,
options?: RequestInit & {
method?: string
query?: Record<string, string | number | boolean | null | undefined>
}
): Promise<T>
Parameters
| Parameter | Type | Description |
|---|---|---|
url | string | The API endpoint URL (e.g., /api/shop) |
options | RequestInit | Standard fetch options + query helper |
Return value
Returns the parsed response data directly (T). JSON responses are parsed automatically; otherwise the raw text is returned.
Behavior
- Client-side: Fetches a session token via
shopify.idToken()and setsAuthorization: Bearer <token> - Server-side: Forwards the incoming request's
Authorizationheader (useful when the client already attached one)
Examples
Basic GET:
<script setup>
const { data } = await useAsyncData(
'shop',
() => useShopifyFetch('/api/shop'),
{ server: false }
)
</script>
With TypeScript generics:
<script setup lang="ts">
interface ShopData {
shop: { name: string; currencyCode: string }
}
const { data } = await useAsyncData(
'shop',
() => useShopifyFetch<ShopData>('/api/shop'),
{ server: false }
)
</script>
With query parameters:
const result = await useShopifyFetch('/api/products', {
query: { limit: 10, status: 'active' }
})
POST request:
const result = await useShopifyFetch('/api/products', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'New Product' })
})