https://github.com/apideck-libraries/vue-vault
Apideck Vault Modal component for Vue
https://github.com/apideck-libraries/vue-vault
apideck integrations vault vue
Last synced: 17 days ago
JSON representation
Apideck Vault Modal component for Vue
- Host: GitHub
- URL: https://github.com/apideck-libraries/vue-vault
- Owner: apideck-libraries
- License: mit
- Created: 2022-12-16T09:24:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T18:00:43.000Z (over 1 year ago)
- Last Synced: 2025-03-22T06:27:15.887Z (3 months ago)
- Topics: apideck, integrations, vault, vue
- Language: Vue
- Homepage: https://www.apideck.com/products/vault
- Size: 168 KB
- Stars: 4
- Watchers: 5
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Vault
A Vue component to embed [Apideck Vault](https://www.apideck.com/products/vault) in any Vue application.
**Vue Vault** | [React Vault](https://github.com/apideck-libraries/vault-react) | [Vault JS](https://github.com/apideck-libraries/vault-js)
## Installation
### Package
```sh
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](https://docs.apideck.com/sdks). Find out more in the [docs](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate).
## Usage
Pass the JWT you got from the Vault session to `@apideck/vue-vault`, call the slot prop `open` to open the Vault modal.
```vue
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
Open
```
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.
```vue
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
Open
```
If you want to get notified when the modal opens and closes, you can provide the `onReady` and `onClose` options.
```vue
import { VueVault } from "@apideck/vue-vault";
const sessionJwt = "REPLACE_WITH_SESSION_TOKEN";
function onClose() {
console.log("closed!");
}
function onReady() {
console.log("ready!");
}
Open
```
### Props
| Property | Type | Required | Default | Description |
| -------------------- | -------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| token | string | true | - | The JSON Web Token returned from the [Create Session API](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate) |
| 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 |