---
source_url: https://www.pubnub.com/docs/sdks/vue/api-reference/storage-and-playback
title: Message Persistence API for Vue SDK
updated_at: 2026-06-19T11:39:07.410Z
---

> 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


# Message Persistence API for Vue SDK

Message Persistence gives you real-time access to the history of messages published to PubNub. Each message is timestamped to the nearest 10 nanoseconds and stored across multiple availability zones in several geographic locations. You can encrypt stored messages with AES-256 so they are not readable on PubNub’s network. For details, see [Message Persistence](https://www.pubnub.com/docs/general/storage).

You control how long messages are stored through your account’s retention policy. Options include: 1 day, 7 days, 30 days, 3 months, 6 months, 1 year, or Unlimited.

You can retrieve the following:

* Messages
* Message reactions
* Files (using the File Sharing API)

## History

:::warning Requires Message Persistence
This method requires that Message Persistence 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/).
:::

This function fetches historical messages of a channel.

It is possible to control how messages are returned and in what order, for example you can:

* Search for messages starting on the newest end of the timeline (default behavior - `reverse` = `false`)
* Search for messages from the oldest end of the timeline by setting `reverse` to `true`.
* Page through results by providing a `start` OR `end` timetoken.
* Retrieve a *slice* of the time line by providing both a `start` AND `end` timetoken.
* Limit the number of messages to a specific quantity using the `count` parameter.

:::tip Start & End parameter usage clarity:
If only the `start` parameter is specified (without `end`), you will receive messages that are **older** than and up to that `start` timetoken value. If only the `end` parameter is specified (without `start`) you will receive messages that match that `end` timetoken value and **newer** Specifying values for both `start` *and* `end` parameters will return messages between those timetoken values (inclusive on the `end` value). Keep in mind that you will still receive a maximum of 100 messages even if there are more messages that meet the timetoken values. Iterative calls to history adjusting the `start` timetoken is necessary to page through the full set of results if more than 100 messages meet the timetoken values.
:::

### Method(s)

Use the following method(s) in the Vue SDK:

```javascript
history( {String channel, Boolean reverse, Number count, Boolean stringifiedTimeToken, Boolean includeMeta, String start, String end}, Function callback )
```

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| channel | String | Yes |  | Specifies `channel` to return history messages from. |
| reverse | Boolean | Optional | `false` | Setting to `true` will traverse the `time` line in `reverse` starting with the oldest `message` first.If both `start` and `end` arguments are provided, `reverse` is ignored and messages are returned starting with the newest `message`. |
| count | Number | Optional | `100` | Specifies the number of historical messages to return. Default/Maximum is `100`. |
| stringifiedTimeToken | Boolean | Optional | `false` | If `stringifiedTimeToken` is specified as `true`, the SDK will return `timetoken` values as a strings instead of integers. Usage of setting is encouraged in javascript environments which perform round-up/down on large integers. |
| includeMeta | Boolean | Optional |  | Whether message meta information should be fetched or not. |
| start | String | Optional |  | timetoken delimiting the `start` of `time` slice (exclusive) to pull messages from. |
| end | String | Optional |  | timetoken delimiting the `end` of `time` slice (inclusive) to pull messages from. |
| callback | Function | Optional |  | Executes on a successful/unsuccessful `history`. |

:::tip Using the reverse< parameter
Messages are always returned sorted in ascending time direction from history regardless of `reverse`. The `reverse` direction matters when you have more than 100 (or `count`, if it's set) messages in the time interval, in which case `reverse` determines the end of the time interval from which it should start retrieving the messages.
:::

### Sample code

Retrieve the last 100 messages on a channel:

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

const pubnub = PubNubVue.getInstance();

pubnub.history(
    {
        channel: 'history_channel',
        count: 100, // how many items to fetch
        stringifiedTimeToken: true, // false is the default
    },
    function(status, response) {
        // handle status, response
    }
);
```

### Response

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

// Example of Response
{
    endTimeToken: "14867650866860159",
    messages: [
        {
            timetoken: "14867650866860159",
            entry: "[User 636] hello World"
        },
        {...},
        {...},
        {...}
    ],
    startTimeToken: "14867650866860159"
}
```

### Other examples

#### Use history() to retrieve the three oldest messages by retrieving from the time line in reverse

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

const pubnub = PubNubVue.getInstance();

pubnub.history(
    {
        channel: 'my_channel',
        reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
        count: 3, // how many items to fetch
        stringifiedTimeToken: true// false is the default
    },
    function(status, response) {
        // handle status, response
    }
);
```

#### Use history() to retrieve messages newer than a given timetoken by paging from oldest message to newest message starting at a single point in time (exclusive)

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

const pubnub = PubNubVue.getInstance();

pubnub.history(
    {
        channel: 'my_channel',
        reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
        stringifiedTimeToken: true, // false is the default
        start: '13406746780720711'// start timetoken to fetch
    },
    function(status, response) {
        // handle status, response
    }
);
```

#### Use history() to retrieve messages until a given timetoken by paging from newest message to oldest message until a specific end point in time (inclusive)

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

const pubnub = PubNubVue.getInstance();

pubnub.history(
    {
        channel: 'my_channel',
        stringifiedTimeToken: true, // false is the default
        end: '13406746780720711'// start timetoken to fetch
    },
    function(status, response) {
        // handle status, response
    }
);
```

#### History paging example

:::note Usage
You can call the method by passing 0 or a valid **timetoken** as the argument.
:::

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

const pubnub = PubNubVue.getInstance();

getAllMessages = function(timetoken) {
    pubnub.history(
        {
            channel: 'history_test',
            stringifiedTimeToken: true, // false is the default
            start: timetoken // start timetoken to fetch
        },
        function(status, response) {
            var msgs = response.messages;
            var start = response.startTimeToken;
            var end = response.endTimeToken;
            // if msgs were retrieved, do something useful with them
            if (msgs != "undefined" && msgs.length > 0) {
                console.log(msgs.length);
                console.log("start : "+ start);
                console.log("end : "+ end);
            }
            // if 100 msgs were retrieved, there might be more; call history again
            if (msgs.length == 100)
                getAllMessages(start);
        }
    );
}

//Usage examples:
//getAllMessages();
//getAllMessages(null);
```

#### Sample code using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.history({
    channel: 'history_channel',
    reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
    count: 100, // how many items to fetch
    stringifiedTimeToken: true, // false is the default
    start: '123123123123', // start timetoken to fetch
    end: '123123123133'// end timetoken to fetch
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Use history() to retrieve the three oldest messages by retrieving from the time line in reverse using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.history({
    channel: 'my_channel',
    reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
    count: 3, // how many items to fetch
    stringifiedTimeToken: true// false is the default
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Use history() to retrieve messages newer than a given timetoken by paging from oldest message to newest message starting at a single point in time (exclusive) using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.history({
    channel: 'my_channel',
    reverse: true, // Setting to true will traverse the time line in reverse starting with the oldest message first.
    stringifiedTimeToken: true, // false is the default
    start: '13406746780720711' // start timetoken to fetch
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Use history() to retrieve messages until a given timetoken by paging from newest message to oldest message until a specific end point in time (inclusive) using promises

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

const pubnub = PubNubVue.getInstance();

pubnub.history({
    channel: 'my_channel',
    stringifiedTimeToken: true, // false is the default
    end: '13406746780720711'// start timetoken to fetch
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});
```

#### Paging history Responses using promises

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

const pubnub = PubNubVue.getInstance();

function getAllMessages(timetoken) {
    pubnub.history(
        {
            channel: 'history_test',
            stringifiedTimeToken: true, // false is the default
            start: timetoken // start timetoken to fetch
        }).then((response) => {
            var msgs = response.messages;
            var start = response.startTimeToken;
            var end = response.endTimeToken;

            // if msgs were retrieved, do something useful with them
            if (msgs !== undefined && msgs.length > 0) {
                console.log(msgs.length);
                console.log("start : " + start);
                console.log("end : " + end);
            }

            // if 100 msgs were retrieved, there might be more; call history again
            if (msgs.length == 100) {
                getAllMessages(start);
            }
        }).catch((error) => {
            console.log(error);
        });
}

//Usage examples:
//getAllMessages();
//getAllMessages(null);
```

#### Fetch messages with metadata

```javascript
pubnub.history(
    {
        channel: 'my_channel',
        stringifiedTimeToken: true,
        includeMeta: true,
    },
    function (status, response) {
        // handle status, response
    }
);
```

## Batch history

:::warning Requires Message Persistence
This method requires that Message Persistence 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

This function fetches historical messages from multiple channels. The `includeMessageActions` or `includeActions` flag also allows you to fetch message reactions along with the messages.

It's possible to control how messages are returned and in what order. For example, you can:

* Search for messages starting on the newest end of the timeline.
* Search for messages from the oldest end of the timeline.
* Page through results by providing a `start` OR `end` timetoken.
* Retrieve a *slice* of the time line by providing both a `start` AND `end` timetoken.
* Retrieve a specific (maximum) number of messages using the `count` parameter.

Batch history returns up to 100 messages on a single channel, or 25 per channel on a maximum of 500 channels. Use the `start` and `end` timestamps to page through the next batch of messages.

:::tip
If you specify only the `start` parameter (without `end`), you will receive messages that are older than the `start` timetoken.
If you specify only the `end` parameter (without `start`), you will receive messages from that `end` timetoken and newer.
Specify values for both `start` and `end` parameters to retrieve messages between those timetokens (inclusive of the `end` value).
Keep in mind that you will still receive a maximum of 100 messages (or 25, for multiple channels) even if there are more messages that meet the timetoken values. Iterative calls to history adjusting the `start` timetoken are necessary to page through the full set of results if more messages meet the timetoken values.
:::

### Method(s)

Use the following method(s) in the Vue SDK:

```javascript
fetchMessages(
    {Array channels, Number count, Boolean stringifiedTimeToken, Boolean includeMeta, Boolean includeMessageType, Boolean includeUUID, Boolean includeMessageActions, String start, String end},
    Function callback )
```

| Parameter | Description |
| --- | --- |
| `channels` *Type: ArrayDefault: n/a | Specifies `channels` to return history messages from. |
| `count`Type: NumberDefault: `25` | Specifies the number of historical messages to return per channel. Default/Maximum is `25` per `channel`. |
| `stringifiedTimeToken`Type: BooleanDefault: `false` | If `stringifiedTimeToken` is specified as `true`, the SDK will return `timetoken` values as a strings instead of integers. Usage of setting is encouraged in javascript environments which perform round-up/down on large integers. |
| `includeMessageType`Type: BooleanDefault: `true` | Pass `true` to receive the message type with each history message. |
| `includeUUID`Type: BooleanDefault: `true` | Pass `true` to receive the publisher `uuid` with each history message. |
| `includeMeta`Type: BooleanDefault: n/a | Whether message meta information should be fetched or not. |
| `includeMessageActions`Type: BooleanDefault: n/a | Whether message added message reactions should be fetched or not. Throws an exception in case if API called with more than one `channel`. Truncation will happen if number of actions on the messages returned is > 25000. Each message can have a maximum of 25000 actions attached to it. Consider the example of querying for 10 meesages. The first five messages have 5000 actions attached to each of them. The API will return the first 5 messages and all their 25000 actions. The response will also include a `more` link to get the remaining 5 messages. |
| `start`Type: StringDefault: n/a | timetoken delimiting the `start` of `time` slice (exclusive) to pull messages from. |
| `end`Type: StringDefault: n/a | timetoken delimiting the `end` of `time` slice (inclusive) to pull messages from. |
| `callback`Type: FunctionDefault: n/a | Executes on a successful/unsuccessful `fetchMessages`. |

### Sample code

Retrieve the last message on a channel:

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

const pubnub = PubNubVue.getInstance();

// assuming pubnub is an initialized instance
// start, end, count are optional
pubnub.fetchMessages(
    {
        channels: ['ch1', 'ch2', 'ch3'],
        start: "15343325214676133",
        end: "15343325004275466",
        count: 30
    },
    function(status, response) {
        // handle response
    }
);
```

### Response

```javascript
//Example of status
{
    error: false,
    operation: 'PNFetchMessagesOperation',
    statusCode: 200
}

//Example of response
{
    "channels":{
        "my-channel":[
            {
                "message":"message_1",
                "timetoken":"15483367794816642",
                "uuid":"my-uuid",
                "message_type":null
            },
            {
                "message":"message_2",
                "timetoken":"15483367810978163",
                "uuid":"my-uuid",
                "message_type":null
            }
        ],
        "my-channel-2":[
            {
                "message":"message_1",
                "timetoken":"15483367827886667",
                "uuid":"my-uuid",
                "message_type":null
            }
        ]
    }
}
```

### Other examples

Fetch messages with metadata and actions

```javascript
pubnub.fetchMessages(
    {
        channels: ['my_channel'],
        stringifiedTimeToken: true,
        includeMeta: true,
        includeMessageActions: true,
    },
    function (status, response) {
        // handle status, response
    }
);
```

Fetch messages with metadata and actions Response

```javascript
// Example of status
{
    "error": false,
    "operation": "PNFetchMessagesOperation",
    "statusCode": 200
}

// Example of response
{
    "channels":{
        "my_channel":[
            {
                "timetoken":"15741125155552287",
                "message":{
                    "text":"Hello world!",
                    "uuid":"my-uuid",
                    "message_type":null,
                    "meta":""
                },
                "data":{
                    "reaction":{
                        "smiley_face":[
                            {
                                "uuid":"my-uuid",
                                "actionTimetoken":"15741125155943280"
                            }
                        ]
                    }
                }
            }
        ]
    },
"more": {
    "url": "/v3/history-with-actions/sub-key/subscribeKey/channel/myChannel?start=15610547826970000&max=98",
    "start": "15610547826970000",
    "max": 98
}
}
```

## Delete messages from history

:::warning Requires Message Persistence
This method requires that Message Persistence 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/).
:::

Removes the messages from the history of a specific channel.

:::note
There is a setting to accept delete from history requests for a key, which you must enable by checking the Enable `Delete-From-History` checkbox in the key settings for your key in the Admin Portal.
Requires Initialization with secret key.
:::

### Method(s)

To `Delete Messages from History` you can use the following method(s) in the Vue SDK.

:::note
The Delete Messages method behaves slightly differently than other history methods. Note that the `start` parameter is exclusive and the `end` parameter is inclusive.
:::

```javascript
deleteMessages({String channel, String start, String end},Function callback)
```

| Parameter | Description |
| --- | --- |
| `channel` *Type: String | Specifies `channel` messages to be deleted from history. |
| `start`Type: String | timetoken delimiting the `start` of time slice (exclusive) to delete messages from. |
| `end`Type: String | timetoken delimiting the `end` of time slice (inclusive) to delete messages from. |
| `callback`Type: Function | Is called on successful or unsuccessful execution of `deleteMessages`. |

### Sample code

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

const pubnub = PubNubVue.getInstance();

pubnub.deleteMessages(
    {
        channel: 'ch1',
        start: '15088506076921021',
        end: '15088532035597390'
    },
    function(result) {
        console.log(result);
    }
);
```

### Response

```javascript
{
    error: false,
    operation: 'PNDeleteMessagesOperation',
    statusCode: 200
}
```

### Other examples

#### Delete specific message from history

To delete a specific message, pass the `publish timetoken` (received from a successful publish) in the `End` parameter and `timetoken +/- 1` in the `Start` parameter. e.g. if `15526611838554310` is the `publish timetoken`, pass `15526611838554309` in `Start` and `15526611838554310` in `End` parameters respectively as shown in the following code snippet.

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

const pubnub = PubNubVue.getInstance();

pubnub.deleteMessages(
    {
        channel: 'ch1',
        start: '15526611838554309',
        end: '15526611838554310'
    },
    function(result) {
        console.log(result);
    }
);
```

## Terms in this document

* **Channel** - A pathway for sending and receiving messages between devices, created automatically when you first use it, that can handle any number of users and messages for different communication needs, like 1-1 text chats, group conversations, and other data streaming.
* **Channel pattern** - A way to group and analyze channel data to track performance metrics like message counts and user engagement over time with PubNub Insights.
* **Message** - A unit of data transmitted between clients or between a client and a server in PubNub, containing information such as text, binary data, or structured data formats like JSON. Messages are sent over channels and can be tracked for delivery and read status.
* **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.
* **Timetoken** - A unique identifier for each message that represents the number of 100-nanosecond intervals since January 1, 1970, for example, 16200000000000000.