---
source_url: https://www.pubnub.com/docs/sdks/vue/api-reference/presence
title: Presence API for Vue SDK
updated_at: 2026-05-21T15:47:56.025Z
---

> 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


# Presence API for Vue SDK

Presence enables you to track the online and offline status of users and devices in real time, as well as store custom state information. Presence provides authoritative information on:

* When a user has joined or left a channel
* Who, and how many, users are subscribed to a particular channel
* Which channel(s) an individual user is subscribed to
* Associated state information for these users

Learn more about our Presence feature [here](https://www.pubnub.com/docs/general/presence/overview).

## Here now

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

You can obtain information about the current state of a channel including a list of unique user-ids currently subscribed to the channel and the total occupancy count of the channel by calling the `hereNow()` function in your application.

:::note Cache
This method has a 3 second response cache time.
:::

### Method(s)

To call `Here Now` you can use the following method(s) in the Vue SDK:

```javascript
hereNow( {Array channels, Array channelGroups, Boolean includeUUIDs, Boolean includeState}, Function callback )
```

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| channels | Array | Optional |  | Specifies the `channel` name to return occupancy results. If `channel` is not provided, `hereNow()` will return data for all `channels`. |
| channelGroups | Array | Optional |  | The `channel group` for which here now information should be received. |
| includeUUIDs | Boolean | Optional | `true` | Setting `uuid` to `false` disables the return of uuids. |
| includeState | Boolean | Optional | `false` | Setting state to `true` enables the return of subscriber state information. |
| callback | Function | Optional |  | Executes on a successful/unsuccessful `hereNow`. |

### Sample code

#### Get a list of UUIDs subscribed to channel

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow(
    {
        channels: ["ch1"],
        channelGroups : ["cg1"],
        includeUUIDs: true,
        includeState: true
    },
    function(status, response) {
        // handle status, response
    }
);
```

### Response

```javascript
// Example of Status
{
    error: false,
    operation: "PNHereNowOperation",
    statusCode: 200
}

// Example of Response
{
    totalChannels: 1,
    totalOccupancy: 3,
    channels: {
        myChannel1: {
            occupants: [
                {
                    uuid: "User 524"
                },
                {
                    state: {
                        age: 18
                    },
                    uuid: "User 270"
                },
                {
                    state: {
                        age: 24
                    },
                    uuid: "User 594"
                }
            ],
            name: "my_channel",
            occupancy: 3
        }
    }
}
```

### Other examples

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

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow(
    {
        channels: ["my_channel"],
        includeState: true
    },
    function(status, response) {
        // handle status, response
    }
);
```

Example Response

```javascript
// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 1,
    "totalOccupancy": 3,
    "channels": {
        "my_channel": {
            "occupants": [
                {
                    "uuid": "User 1"
                },
                {
                    "state": {
                        "age": 18
                    },
                    "uuid": "User 2"
                },
                {
                    "state": {
                        "age": 24
                    },
                    "uuid": "User 3"
                }
            ],
            "name": "my_channel",
            "occupancy": 3
        }
    }
}
```

#### Return occupancy only

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

You can return only the `occupancy` information for a single channel by specifying the channel and setting `UUIDs` to false:

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow(
    {
        channels: ["my_channel"],
        includeUUIDs: false
    },
    function(status, response) {
        // handle status, response
    }
);
```

Example Response

```javascript
// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 1,
    "totalOccupancy": 3,
    "channels": {
        "my_channel": {
            "occupants": [],
            "name": "my_channel",
            "occupancy": 3
        }
    }
}
```

#### Channel group usage

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

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow(
    {
        channelGroups : ['my_channel_group']
    },
    function(status, response) {
        // handle status, response
    }
);
```

Example Response

```javascript
// Example of Status
{
    "error": false,
    "operation": "PNHereNowOperation",
    "statusCode": 200
}

// Example of Response
{
    "totalChannels": 2,
    "totalOccupancy": 3,
    "channels": {
        "my_channel_1": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User1"
                },
                {
                    "state": null,
                    "uuid": "User3"
                }
            ],
            "name": "my_channel_1",
            "occupancy": 2
        },
        "my_channel_2": {
            "occupants": [
                {
                    "state": null,
                    "uuid": "User2"
                }
            ],
            "name": "my_channel_2",
            "occupancy": 1
        }
    }
}
```

#### Sample code using promises

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

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
    channels: ["ch1"],
    channelGroups: ["cg1"],
    includeUUIDs: true,
    includeState: true
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Returning state using promises

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

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
    channels: ["my_channel"],
    includeState: true
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Return occupancy only using promises

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

You can return only the `occupancy` information for a single channel by specifying the channel and setting `uuids` to false:

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
    channels: ["my_channel"],
    includeUUIDs: false
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Channel group usage using promises

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

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

const pubnub = PubNubVue.getInstance();

pubnub.hereNow({
    channelGroups: ["my_channel_group"]
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

## Where now

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

### Description

You can obtain information about the current list of channels to which a UUID is subscribed to by calling the `whereNow` function in your application.

:::note
If the app is killed/crashes and restarted (or the page containing the PubNub instance is refreshed on the browser) within the heartbeat window no timeout event is generated.
:::

### Method(s)

To call `whereNow` you can use the following method(s) in the Vue SDK:

```javascript
whereNow ({String uuid},Function callback)
```

| Parameter | Description |
| --- | --- |
| `uuid`Type: StringDefault: `current uuid` | Specifies the `uuid` to return channel list for. |
| `callback`Type: FunctionDefault: n/a | Executes on a successful/unsuccessful `whereNow`. |

### Sample code

You simply need to define the `uuid` and the `callback` function to be used to send the data to as in the example below.

#### Get a list of channels a UUID is subscribed to

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

const pubnub = PubNubVue.getInstance();

pubnub.whereNow(
    {
        uuid: "uuid"
    },
    function(status, response) {
        // handle status, response
    }
);
```

### Response

```javascript
// Example of Status
{
    error: false,
    operation: "PNWhereNowOperation",
    statusCode: 200
}

// Example of Response
{
    "channels": ["ch1", "ch2"]
}
```

### Other examples

#### Sample code using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.whereNow({
    uuid: "uuid"
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

## User state

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

Clients can set a dynamic custom state (score, game state, location) for their users on one or more channels and store it on a channel as long as the user stays subscribed.

The state is not persisted, and when the client disconnects, the state data is lost. For more information, refer to [Presence State](https://www.pubnub.com/docs/general/presence/presence-state).

### Method(s)

#### Set state

```javascript
setState({Array channels, Array channelGroups, Object state},Function callback)
```

| Parameter | Description |
| --- | --- |
| `channels`Type: Array | Either `channels` or `channelGroups` should be provided, Specifies the `channels` to set the state. |
| `channelGroups`Type: Array | Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to set the state |
| `state`Type: Object | JSON object of key/value pairs with supported data-types of int, float and string. Nesting of key/values is not permitted and key names beginning with prefix `pn` are reserved. If the state parameter is undefined, the current state for the specified `uuid` will be returned. If a specified key already exists for the `uuid` it will be over-written with the new value. Key values can be deleted by setting the particular value to `null`. |
| `callback`Type: Function | Executes on a successful/unsuccessful `setState`. |

#### Get state

```javascript
getState({String uuid, Arraychannels, ArraychannelGroups},Function callback)
```

| Parameter | Description |
| --- | --- |
| `uuid`Type: StringDefault: `current uuid` | The subscriber `uuid` to get the current state. |
| `channels`Type: ArrayDefault: n/a | Either `channels` or `channelGroups` should be provided, Specifies the `channels` to get the state. |
| `channelGroups`Type: ArrayDefault: n/a | Either `channels` or `channelGroups` should be provided, Specifies the Channel Group to get the state. |
| `callback`Type: FunctionDefault: n/a | Executes on a successful/unsuccessful `getState`. |

### Sample code

#### Set state

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

const pubnub = PubNubVue.getInstance();

pubnub.setState(
    {
        state: newState,
        channels: ['ch1'],
        channelGroups: ['cg1']
    },
    function(status, response) {
        // handle status, response
    }
);
```

#### Get state

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

const pubnub = PubNubVue.getInstance();

pubnub.getState(
    {
        uuid: "uuid",
        channels: ['ch1'],
        channelGroups: ['cg1']
    },
    function(status, response) {
        // handle status, response
    }
);
```

### Response

#### Set state

```javascript
// Example of Status
{
    error: false,
    operation: "PNSetStateOperation",
    statusCode: 200
}

// Example of Response
{
    state: {
        me: 'typing'
    }
}
```

#### Get state

```javascript
// Example of Status
{
    error: false,
    operation: "PNGetStateOperation",
    statusCode: 200
}

// Example of Response
{
    channels: {
        ch1: {
            me: 'typing'
        }
    }
}
```

### Other examples

#### Set state Basic usage using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.setState({
    state: newState,
    channels: ['ch1'],
    channelGroups: ['cg1']
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Get state Basic usage using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.getState({
    uuid: "uuid",
    channels: ['ch1'],
    channelGroups: ['cg1']
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```