@apideck/vue-vault v1.1.0

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