# Vue SDK
URL: https://www.quiltt.dev/connector/sdk/vue
Description: Integrate Quiltt Connector into your Vue 3 application with our Vue SDK. Learn how to install the package and get started with components and composables.
Navigation: connector → sdk → vue
Tags: Connector, SDKs
Content Length: 7k characters

The [Quiltt Vue SDK](https://www.npmjs.com/package/@quiltt/vue) provides components and composables for seamless integration of the Quiltt Connector into your Vue 3 app.

Info - Documentation:
For full documentation, additional examples and the source code, see the [Quiltt Vue SDK on
  GitHub](https://github.com/quiltt/quiltt-sdks/tree/main/packages/vue#readme).

## Installation

Code Examples:

  ```sh
    $ npm install @quiltt/vue vue
    ```
  ```sh
    $ pnpm add @quiltt/vue vue
    ```
  ```sh
    $ yarn add @quiltt/vue vue
    ```

## Setup

Register the plugin in your app entry point. `QuilttPlugin` manages session state and provides a preconfigured GraphQL client to the whole app:

```ts
// main.ts

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

To start with an existing Session token, pass it with your `clientId` (Environment ID) as plugin options:

```ts
createApp(App)
  .use(QuilttPlugin, [token: '<SESSION_TOKEN_FROM_SERVER>',
    clientId: '<ENVIRONMENT_ID>',])
  .mount('#app')
```

## 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](/authentication) for more information on generating Session tokens.

Use the `useQuilttSession` composable to import a token at runtime:

```vue

Script:

const {importSession} = useQuilttSession()

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

Template:

QuilttButton:
"
    @exit-success="(m) => console.log('Connected:', m.connectionId)"
  >
    Add Bank Account

```

## Components

### `QuilttButton`

Opens the Connector in a modal overlay.

```html

QuilttButton:
" @exit-success="handleSuccess">
  Connect Account

```

### `QuilttContainer`

Renders the Connector inline.

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

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

```ts

```

## Props and Events

### 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 |
| `theme-mode` | `'light'` \| `'dark'` \| `'auto'` | Theme mode for the Connector UI. Defaults to `'light'` |
| `app-launcher-url` | string | Deep link URL for OAuth callbacks |
| `force-remount-on-connection-change` | boolean | Forces complete remount when `connection-id` changes. Defaults to `false` |

### Events

| Event | Payload | Description |
| --- | --- | --- |
| `@load` | `metadata` | Connector loaded |
| `@event` | `eventType, metadata` | Intermediate Connector event |
| `@exit` | `eventType, metadata` | Connector exited via an event |
| `@exit-success` | `metadata` | Connection successful |
| `@exit-abort` | `metadata` | User cancelled |
| `@exit-error` | `metadata` | Error occurred |

## Composables

### `useQuilttSession`

```ts

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.

### `useQuilttConnector`

```ts

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

```html
[Add Account]
```

### 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:

```ts

```

## Querying the GraphQL API

`@quiltt/vue` bundles a preconfigured GraphQL client and re-exports [Vue Apollo](https://apollo.vuejs.org/) composables, so you can query the [Quiltt GraphQL API](/api/graphql) directly. `QuilttPlugin` provides the client to `useQuery`, `useMutation`, and `useSubscription` — no additional Apollo setup is required.

Requests authenticate with the current Session token, so import a token first (see [Handling Authentication](#handling-authentication)).

```vue

Script:

const [result, loading, error] = useQuery(gql`
  query {
    profile [id
      email]
  }
`)

Template:
Loading...
  {[error.message]}
  {[result?.profile?.email]}

```

Vue Apollo's `useQuery` returns a reactive `result` ref that holds the response data once the query resolves. The following GraphQL composables are available from `@quiltt/vue`: `useQuery`, `useLazyQuery`, `useMutation`, `useSubscription`, `useApolloClient`, and `gql`.

## Reconnection

Pass `connection-id` to repair or reconnect an existing Connection. See the [Reconnect Flow guide](/connector/reconnect) for more information.

```html

QuilttButton:
"
  connection-id="<CONNECTION_ID>"
  @exit-success="handleSuccess"
>
  Reconnect

```

## Checking Provider Institution Compatibility

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

Info:
Contact Quiltt Support to enable access to this feature.

```vue

Script:

const props = defineProps<[plaidInstitutionId: string]>()

const [checkResolvable, isResolvable, isLoading] = useQuilttResolvable('<CONNECTOR_ID>')

onMounted(() => {
  checkResolvable([plaid: props.plaidInstitutionId])
})

Template:
Checking...
  

QuilttButton:
">
    Connect through Quiltt

```

## Capacitor / Ionic

For mobile apps, use `@quiltt/capacitor/vue` which adds native OAuth handling. See the [Capacitor SDK guide](/connector/sdk/capacitor) for full documentation.