> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js

# Add Javascript SDK to your Front-end

First, install `@membranehq/sdk` NPM package:

```shell theme={null}
npm install @membranehq/sdk
```

Then, initialize the SDK with an Authentication Token:

```javascript theme={null}
import { MembraneClient } from '@membranehq/sdk'

const membrane = new MembraneClient({
  // Test authentication token. You will need to replace it with the real one.
  token: '',
})
```

In this example we use the test token you can find on the [Settings](https://console.getmembrane.com/w/0/settings) page of your workspace.\
You will need to replace it with a real authentication token later (see [Authentication](/docs/how-membrane-works/authentication)).

To verify that everything works, let's open our drop-in integration UI:

```javascript theme={null}
await membrane.open()
```

In the end your basic Vue.js setup may look like this:

```vue theme={null}
<script setup lang="ts">
import { MembraneClient } from '@membranehq/sdk'

const token = await tokenResp.json()

const membrane = new MembraneClient({
  token,
})
</script>

<template>
  <div v-if="!token">Loading...</div>
  <div v-else>
    <button class="btn btn-sm btn-outline m-2" v-on:click="membrane.open">Configure Integrations</button>
  </div>
</template>
```

## Dynamic Token

If it is more convenient for you to fetch token dynamically instead of providing static value, you can use `fetchToken` instead:

```javascript theme={null}
import { MembraneClient } from '@membranehq/sdk'

const membrane = new MembraneClient({
  // Test authentication token. You will need to replace it with the real one.
  async fetchToken() {
    return ''
  },
})
```

This option also automatically handles token expiration. If SDK was initialized long ago and token had time to expire, it will be automatically re-fetched before making new API requests.

## SDK Reference

To see the full list of SDK methods check out the [JavaScript API Reference](https://console.getmembrane.com/ref/sdk/index.html).