Vue SDK

The Quiltt Vue SDK provides components and composables for seamless integration of the Quiltt Connector into your Vue 3 app.

Link to this section#Installation

Link to this section#Setup

Register the plugin in your app entry point:

Link to this section#Handling Authentication

To load the Connector for use by a pre-existing end-user, you'll need to pass a valid Session token. See the Authentication guide for more information on generating Session tokens.

Use the useQuilttSession composable to import a token at runtime:

Link to this section#Components

Link to this section#QuilttButton

Opens the Connector in a modal overlay.

Link to this section#QuilttContainer

Renders the Connector inline.

Link to this section#QuilttConnector

Full-page iframe for embedded integration.

For better tree-shaking, components can also be imported from the subpath:

Link to this section#Props and Events

Link to this section#Props

Prop	Type	Description
connector-id	string	Required. Quiltt Connector ID
connection-id	string	Existing connection ID for reconnection
institution	string	Pre-select an institution
app-launcher-url	string	Deep link URL for OAuth callbacks

Link to this section#Events

Event	Payload	Description
@load	metadata	Connector loaded
@exit-success	metadata	Connection successful
@exit-abort	metadata	User cancelled
@exit-error	metadata	Error occurred

Link to this section#Composables

Link to this section#useQuilttSession

Link to this section#useQuilttConnector

Link to this section#Additional Composables

• useQuilttInstitutions — Search available institutions for a connector.
• useQuilttResolvable — Check if a provider connection can be resolved.
• useQuilttSettings — Access plugin-provided settings such as clientId.
• useSession — Low-level reactive session state manager.
• useStorage — Reactive wrapper around Quiltt global storage.

For better tree-shaking, composables can also be imported from the subpath:

Link to this section#Reconnection

Pass connection-id to repair or reconnect an existing Connection. See the Reconnect Flow guide for more information.

Link to this section#Checking Provider Institution Compatibility

Use the useQuilttResolvable composable to check if external provider institution IDs (e.g., Plaid) are supported by your connector.

Link to this section#Capacitor / Ionic

For mobile apps, use @quiltt/capacitor/vue which adds native OAuth handling. See the Capacitor SDK guide for full documentation.