Qantra

Qantra is the communication bridge between your embedded app (running in an iframe) and the YouCan Seller Area (the parent window). It uses postMessage under the hood, but exposes a clean TypeScript API so you never have to deal with that directly.

Installation

Qantra is included automatically when you use the Nuxt starter template. To install it manually:

pnpm add @youcan/qantra

Setup

Call qantra.initialize() once, as early as possible in your app's lifecycle. This patches window.fetch to automatically inject the seller's session token into all same-origin requests.

import { initialize } from '@youcan/qantra';

initialize();

After this, every fetch call to your own server will automatically include:

Authorization: Bearer <session token>
X-Requested-With: XMLHttpRequest

Your server reads this header and uses it to verify and establish the seller session.

TIP

Qantra components and APIs don't render UI inside your app. They communicate with the Seller Area, which handles the actual rendering (toasts, resource picker, etc.).

YouCan UI

When building your app's UI, use YouCan UI to match the look and feel of the Seller Area. It's a Vue component library with all the components sellers already know.

API Reference

API	Description
sessionToken()	Get the seller's current session JWT
bounce()	Navigate to Seller Area pages
resourcePicker()	Open a product/collection picker
toast.show()	Show a toast notification in the Seller Area