@apideck/vue-vault
v1.1.0
Published
A Vue component to embed [Apideck Vault](https://www.apideck.com/products/vault) in any Vue application.
Downloads
658
Readme
Vue Vault
A Vue component to embed Apideck Vault in any Vue application.
Vue Vault | React Vault | Vault JS
Installation
Package
npm install @apideck/vue-vault
Prerequisites
Before opening the Vault modal with @apideck/vue-vault
, you need to create a Vault session from your backend using the Vault API or one of our SDKs. Find out more in the docs.
Usage
Pass the JWT you got from the Vault session to @apideck/vue-vault
, call the slot prop open
to open the Vault modal.
<script setup lang="ts">
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
</script>
<template>
<main>
<VueVault :token="sessionJwt" v-slot="vaultProps">
<button @click="vaultProps.open()">Open</button>
</VueVault>
</main>
</template>
If you want to only show integrations for a single Unified API, you can do that by passing the unified-api
prop. If you want to open Vault for only a single integration, you can provide the service-id
prop.
<script setup lang="ts">
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
</script>
<template>
<main>
<VueVault :token="sessionJwt" unified-api="accounting" service-id="quickbooks" v-slot="vaultProps">
<button @click="vaultProps.open()">Open</button>
</VueVault>
</main>
</template>
If you want to get notified when the modal opens and closes, you can provide the onReady
and onClose
options.
<script setup lang="ts">
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
function onClose() {
console.log("closed!");
}
function onReady() {
console.log("ready!");
}
</script>
<template>
<main>
<VueVault :token="sessionJwt" :on-close="onClose" :on-ready="onReady" v-slot="vaultProps">
<button @click="vaultProps.open()">Open</button>
</VueVault>
</main>
</template>
Props
| Property | Type | Required | Default | Description | | -------------------- | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | token | string | true | - | The JSON Web Token returned from the Create Session API | | show-attribution | boolean | false | true | Show "Powered by Apideck" in the backdrop of the modal backdrop | | on-close | () => void | false | - | Function that gets called when the modal is closed | | on-ready | () => void | false | - | Function that gets called when the modal is opened | | on-connection-change | (connection: Connection) => void | false | - | Function that gets called when the user updates a connection. This can be linking their account, filling out settings or adding a new connection | | on-connection-delete | (connection: Connection) => void | false | - | Function that gets called when the user deletes a connection | | unified-api | string | false | - | When unified-api is provided it will only show integrations from that API. | | service-id | string | false | - | When unified-api and service-id are provided Vault opens a single integration |