---
source_url: https://www.pubnub.com/docs/sdks/vue/api-reference/configuration
title: Configuration API for Vue SDK
updated_at: 2026-05-22T11:08:09.024Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Configuration API for Vue SDK

Complete API reference for building real-time applications on PubNub with the Vue Software Development Kit (SDK). This page covers configuration, initialization, and event handling with concise, working examples.

You must include the PubNub Vue SDK in your code before initializing the client.

```html
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.~~~1.0.1~~~.js"></script>
```

## Initialization

Use this method to initialize the PubNub Client API context and establish account-level credentials such as publish and subscribe keys. You can create an account and get your keys from the Admin Portal.

### Method(s)

To `Initialize` PubNub you can use the following method(s) in the Vue SDK:

```javascript
Vue.use(PubNubVue, {String subscribeKey, String publishKey, String cipherKey, String authKey, Boolean logVerbosity, String uuid, Boolean ssl, String origin, Number presenceTimeout, Number heartbeatInterval, Boolean restore, Boolean keepAlive, Object keepAliveSettings, Boolean suppressLeaveEvents, Number requestMessageCountThreshold, Boolean listenToBrowserNetworkEvents} )
```

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| subscribeKey | String | Yes |  | Specifies the `subscribeKey` to be used for subscribing to a channel. This key can be specified at initialization or along with a `subscribe()`. |
| publishKey | String | Optional |  | Specifies the `publishKey` to be used for publishing messages to a channel. This key can be specified at initialization or along with a `publish()`. |
| cipherKey | String | Optional |  | If passed, will encrypt the payloads. |
| authKey | String | Optional |  | If Access Manager enabled, this key will be used on all requests. |
| logVerbosity | Boolean | Optional | `false` | log HTTP information. |
| uuid | String | Yes |  | `UUID` to use. You should set a unique `UUID` to identify the user or the device that connects to PubNub. If you don't set the `UUID`, you won't be able to connect to PubNub. |
| ssl | Boolean | Optional | `true for v4.20.0 onwards, false before v4.20.0` | If set to `true`, requests will be made over HTTPS. |
| origin | String | Optional | `ps.pndsn.com` | If a custom domain is required, SDK accepts it here. To request a custom domain, contact support and follow the [request process](https://www.pubnub.com/docs/general/setup/data-security#request-process). |
| presenceTimeout | Number | Optional | `300` | How long the server will consider the client alive for presence. The value is in seconds. |
| heartbeatInterval | Number | Optional | `Not Set` | How often the client will announce itself to server. The value is in seconds. Due to server constraints, don't set the value below `3`. |
| restore | Boolean | Optional | `false` | `true` to allow catch up on the front-end applications. |
| keepAlive | Boolean | Optional | `false` | If set to `true`, SDK will use the same TCP connection for each HTTP request, instead of opening a new one for each new request. |
| keepAliveSettings | Object | Optional | `keepAliveMsecs: 1000 freeSocketKeepAliveTimeout: 15000 timeout: 30000 maxSockets: Infinity maxFreeSockets: 256` | Set a custom parameters for setting your connection `keepAlive` if this is set to `true`.`keepAliveMsecs: (Number)` how often to send TCP KeepAlive packets over sockets.`freeSocketKeepAliveTimeout: (Number)` sets the free socket to timeout after freeSocketKeepAliveTimeout milliseconds of inactivity on the free socket.`timeout: (Number)` sets the working socket to timeout after timeout milliseconds of inactivity on the working socket.`maxSockets: (Number)` maximum number of sockets to allow per host.`maxFreeSockets: (Number)` maximum number of sockets to leave open in a free state. |
| suppressLeaveEvents | Boolean | Optional | `false` | When `true` the SDK doesn't send out the leave requests. |
| requestMessageCountThreshold | Number | Optional | `100` | `PNRequestMessageCountExceededCategory` is thrown when the number of messages into the payload is above of `requestMessageCountThreshold`. |
| listenToBrowserNetworkEvents | Boolean | Optional | `false` | If the browser fails to detect the network changes from WiFi to LAN and vice versa or you get reconnection issues, set the flag to `false`. This allows the SDK reconnection logic to take over. |

### Sample code

Applications can `initialize` the PubNub object by passing the `subscribeKey` and `publishKey` keys from your account. Each client should also pass a `UUID` that represents the user or the device that connects to PubNub.

:::note
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
import Vue from 'vue';
import PubNubVue from 'pubnub-vue';

Vue.use(PubNubVue, {
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    cipherKey: "myCipherKey",
    authKey: "myAuthKey",
    logVerbosity: true,
    uuid: "myUniqueUUID",
    ssl: true,
    presenceTimeout: 130
});
```

### Server operations

For servers connecting to PubNub, setting a `UUID` is different than for a client device as there can be multiple instances of the server on the same machine and there is no "authentication" process for a server (at least not like an end user).

The API can be initialized with the `secretKey` if the server needs to administer Access Manager permissions for client applications. When you initialize PubNub with `secretKey`, you get root permissions for the [Access Manager](https://www.pubnub.com/docs/general/security/access-control). With this feature you don't have to grant access to your servers to access channels or channel groups. The servers get all access on all channels and channel groups.

:::note
Anyone with the `secretKey` can grant and revoke permissions to your app. Never let your `secretKey` be discovered, and only exchange and deliver it securely. Only use the `secretKey` on secure environments such as `Node.js` application or other server-side platforms.
:::

:::note
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
var pubnub = new PubNub({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    uuid: "myUniqueUUID",
    secretKey: "secretKey",
    heartbeatInterval: 0
});
```

Now that the pubnub object is instantiated, the client will be able to access the Access Manager functions. The pubnub object will use the `secretKey` to sign all Access Manager messages to the PubNub Network.

### Other examples

#### Initialization for a Read-Only client

In the case where a client will only read messages and never publish to a channel, you can simply omit the `publishKey` when initializing the client:

:::note
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
import Vue from 'vue';
import PubNubVue from 'pubnub-vue';

// Initialize for Read Only Client

Vue.use(PubNubVue, {
    subscribeKey : 'demo'
});
```

#### Initializing with SSL enabled

This examples demonstrates how to enable PubNub Transport Layer Encryption with `TLS`(*formerly known as SSL*). Just initialize the client with `ssl` set to `true`. The hard work is done, now the PubNub API takes care of the rest. Just subscribe and publish as usual and you are good to go.

:::note
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
var pubnub = new PubNub({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    cipherKey: "myCipherKey",
    authKey: "myAuthKey",
    logVerbosity: true, // set false for production
    uuid: "myUniqueUUID",
    ssl: true
});
```

## UUID

A `UUID` (Universal Unique Identifier) is a required unique alphanumeric identifier used to identify the client to the PubNub platform. Each client must pass a `UUID` that represents the user or the device that connects to PubNub.

### Setting the UUID

Set the `UUID` parameter when you instantiate a PubNub instance (i.e., new `PubNub()`). It is important that your application reuse the `UUID` on each device instead of generating a new `UUID` on each connection.

:::note
Always set the `UUID` to uniquely identify the user or device that connects to PubNub. This `UUID` should be persisted, and should remain unchanged for the lifetime of the user or the device. If you don't set the `UUID`, you won't be able to connect to PubNub.
:::

```javascript
var pubnub = new PubNub({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    uuid: "myUniqueUUID"
});
```

You can also call the following method to explicitly set the `UUID`:

```javascript
pubnub.setUUID(string)
```

| Parameter | Description |
| --- | --- |
| `uuid` *Type: String | `UUID` to set. |

```javascript
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setUUID('myUniqueUUID');
```

### Saving the UUID

Providing a value for the `uuid` parameter in the PubNub object initialization will result in that value getting saved in the browser's localStorage key (described above) automatically by the PubNub SDK. You may implement a different local caching strategy, as required.

Consider the following when implementing a `UUID` reuse strategy:

1. On your server, generate a `UUID` the when a user creates a user profile (user registration process). You can generate this with the SDK, or by another method of your choosing.
2. Pass the `UUID` back to the user upon successful login (authentication process).
3. Persist the `UUID` on the device where it can be retrieved the next time the PubNub instance is instantiated. The PubNub instance might be instantiated multiple times as the app is left and re-entered, and you may not require a login with each new session.

### Getting the UUID

Use this method to get the current `UUID` set on your application.This method doesn't take any arguments.

```javascript
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.getUUID();
```

:::note
Each PubNub SDK provides a `UUID` generator API (for example, generateUUID). It is not required that you use this API to create a `UUID` and this format of the `UUID` is not required (any string will do up to 92 characters). Just consider that whatever you use will be visible to other users (if a user peeks behind the scenes using the browser console or other tools), so you should not use a username or email as the `UUID`. The `UUID` should be something that can be easily replaced as required without user interaction or even knowledge that it has happened.
:::

### Generating the UUID

Use this method to generate a `UUID`.

```javascript
PubNub.generateUUID();
```

## Authentication key

This function provides the capability to reset a user's auth Key.

Typically auth Key is specified during initialization for Access Manager enabled applications. In the event that auth Key has expired or a new auth Key is issued to the client from a Security Authority, the new auth Key can be sent using `setAuthKey()`.

### Property

To `Set Authentication Key` you can use the following method(s) in the Vue SDK:

```javascript
pubnub.setAuthKey(string)
```

| Parameter | Description |
| --- | --- |
| `key` *Type: String | `Auth key` to set. |

### Sample code

```javascript
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setAuthKey('my_authkey');
```

### Returns

None.

## Filter expression

:::note Requires Stream Controller add-on
This method requires that the *Stream Controller* add-on is enabled for your key in the [Admin Portal](https://admin.pubnub.com/). Read the [support page](https://support.pubnub.com/hc/en-us/articles/360051974791-How-do-I-enable-add-on-features-for-my-keys-) on enabling add-on features on your keys.
:::

### Description

Stream filtering allows a subscriber to apply a filter to only receive messages that satisfy the conditions of the filter. The message filter is set by the subscribing client(s) but it is applied on the server side thus preventing unwanted messages (those that do not meet the conditions of the filter) from reaching the subscriber.

To set or get message filters, you can use the following method. To learn more about filtering, refer to the [Publish Messages](https://www.pubnub.com/docs/general/messages/publish) documentation.

### Method(s)

1. 1pubnub.setFilterExpression(String filterExpression) * requiredParameterDescriptionfilterExpression *Type: StringPSV2 feature to subscribe with a custom filter expression.
2. 1pubnub.getFilterExpression() This method doesn't take any arguments.

### Sample code

#### Set filter expression

```javascript
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.setFilterExpression('such=wow');
```

#### Get filter expression

```javascript
import PubNubVue from 'pubnub-vue';

const pubnub = PubNubVue.getInstance();
pubnub.getFilterExpression();
```

## Terms in this document

* **PubNub** - PubNub is a real-time messaging platform that provides APIs and SDKs for building scalable applications. It handles the complex infrastructure of real-time communication, including: Message delivery and persistence, Presence detection, Access control, Push notifications, File sharing, Serverless processing with Functions and Events & Actions, Analytics and monitoring with BizOps Workspace, AI-powered insights with Illuminate.