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

$ npm install @quiltt/vue vue

$ pnpm add @quiltt/vue vue

$ yarn add @quiltt/vue vue

Link to this section#Setup

Register the plugin in your app entry point:

// main.ts
import { createApp } from 'vue'
import { QuilttPlugin } from '@quiltt/vue'

createApp(App).use(QuilttPlugin).mount('#app')

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:

<script setup lang="ts">
import { QuilttButton, useQuilttSession } from '@quiltt/vue'

const { importSession } = useQuilttSession()

// Import a session token from your API, local storage, query param, etc.
const onLogin = async (token: string) => {
  await importSession(token)
}
</script>

<template>
  <QuilttButton
    connector-id="<CONNECTOR_ID>"
    @exit-success="(m) => console.log('Connected:', m.connectionId)"
  >
    Add Bank Account
  </QuilttButton>
</template>

Link to this section#Components

Link to this section#QuilttButton

Opens the Connector in a modal overlay.

<QuilttButton connector-id="<CONNECTOR_ID>" @exit-success="handleSuccess">
  Connect Account
</QuilttButton>

Link to this section#QuilttContainer

Renders the Connector inline.

<QuilttContainer connector-id="<CONNECTOR_ID>" @exit-success="handleSuccess" />

Link to this section#QuilttConnector

Full-page iframe for embedded integration.

<QuilttConnector
  connector-id="<CONNECTOR_ID>"
  @exit-success="handleSuccess"
  @navigate="handleNavigate"
  style="width: 100%; height: 100vh"
/>

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

import { QuilttButton } from '@quiltt/vue/components'

Link to this section#Props and Events

Link to this section#Props

Link to this section#Events

Link to this section#Composables

Link to this section#useQuilttSession

import { useQuilttSession } from '@quiltt/vue'

const {
  session,             // Reactive session state
  importSession,       // Import an existing token
  identifySession,     // Start auth flow (email/phone)
  authenticateSession, // Complete auth (passcode)
  revokeSession,       // Invalidate session server-side
  forgetSession,       // Clear session locally
} = useQuilttSession() // optionally pass an environmentId to restrict token imports

await importSession('<SESSION_TOKEN_FROM_SERVER>')
console.log(session.value?.token)

Pass an environmentId (e.g. env_sandbox_...) to restrict importSession to tokens issued for that specific environment. Tokens whose JWT claims don't match will be rejected.

Link to this section#useQuilttConnector

import { useQuilttConnector } from '@quiltt/vue'

const { open } = useQuilttConnector('<CONNECTOR_ID>', {
  onExitSuccess: (m) => console.log('Connected:', m.connectionId),
})

<button @click="open()">Add Account</button>

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:

import { useQuilttSession } from '@quiltt/vue/composables'

Link to this section#Reconnection

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

<QuilttButton
  connector-id="<CONNECTOR_ID>"
  connection-id="<CONNECTION_ID>"
  @exit-success="handleSuccess"
>
  Reconnect
</QuilttButton>

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.

<script setup lang="ts">
import { useQuilttResolvable, QuilttButton } from '@quiltt/vue'
import { onMounted } from 'vue'

const props = defineProps<{ plaidInstitutionId: string }>()

const { checkResolvable, isResolvable, isLoading } = useQuilttResolvable('<CONNECTOR_ID>')

onMounted(() => {
  checkResolvable({ plaid: props.plaidInstitutionId })
})
</script>

<template>
  <div v-if="isLoading">Checking...</div>
  <QuilttButton v-else-if="isResolvable" connector-id="<CONNECTOR_ID>">
    Connect through Quiltt
  </QuilttButton>
</template>

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.