@jcss/vue-plaid-link

Vue component for integrating with Plaid Link

This is an unofficial Vue fork based on the official React version react-plaid-link.

Compatibility

Vue 3.2+

Install

With npm:

npm install --save @jcss/vue-plaid-link

With yarn

yarn add @jcss/vue-plaid-link

With pnpm

pnpm i @jcss/vue-plaid-link

Documentation

Please refer to the official Plaid Link docs for a more holistic understanding of Plaid Link.

Examples

See the examples folder for various complete source code examples.

Using Vue Composables

This is the preferred approach for integrating with Plaid Link in Vue.

Note: token can be null initially and then set once you fetch or generate a link_token asynchronously.

ℹ️ See a full source code examples of using composables:

• examples/simple.vue: minimal example of using composables
• examples/composable.vue: example using composable with all available callbacks
• examples/oauth.vue: example handling OAuth with composable

<template>
  <button :disabled="!ready" @click="open">
    Connect a bank account
  </button>
</template>

<script lang="ts" setup>
import { usePlaidLink } from '@jcss/vue-plaid-link';

const { open, ready } = usePlaidLink({
  token: '<GENERATED_LINK_TOKEN>',
  onSuccess: (public_token, metadata) => {
    // send public_token to server
  },
});
</script>

Available Link configuration options

ℹ️ See src/types/index.ts for exported types.

Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options and the link_token.

usePlaidLink arguments

| key | type | | --------------------- | ----------------------------------------------------------------------------------------- | | token | string \| null | | receivedRedirectUri | string \| undefined | | onSuccess | (public_token: string, metadata: PlaidLinkOnSuccessMetadata) => void | | onExit | (error: PlaidLinkError \| null, metadata: PlaidLinkOnExitMetadata) => void | | onEvent | (eventName: PlaidLinkStableEvent \| string, metadata: PlaidLinkOnEventMetadata) => void | | onLoad | () => void |

usePlaidLink return value

| key | type | | ------- | --------------------------------------------------------------- | | open | () => void | | ready | boolean | | error | ErrorEvent \| null | | exit | (options?: { force: boolean }, callback?: () => void) => void |

Using the pre-built component instead of the usePlaidLink composable

If you cannot use Vue composables for some reason, you can use the PlaidLink component.

ℹ️ See full source code example at examples/component.vue

<template>
  <PlaidLink
    :token="token"
    :on-success="onSuccess"
    :on-event="onEvent"
  >
    Connect a wallet
  </PlaidLink>
</template>

<script lang="ts" setup>
import type { PlaidLinkOnEvent, PlaidLinkOnSuccess } from '@jcss/vue-plaid-link';
import PlaidLink from '@jcss/vue-plaid-link';

// ...
</script>