Guides / Get started - Get started with Vue.js

This guide assumes that you're already familiar with Vue.js.

Alternatively, you can copy this example and follow the instructions in the README:

Run the following command to install the Liveblocks client package:

npm install @liveblocks/client

@liveblocks/client lets you connect to Liveblocks servers.

Liveblocks does not have a package for Vue.js as we have for React. If you would like to have one, or even better if you have ideas about what kind of API you would like to use, please let us know about it on this Github issue.

To connect to Liveblocks, you need to create a Liveblocks client with createClient inside on of your Vue component.

1
2
3
4
5
6
7
import { createClient } from "@liveblocks/client";
// Create a liveblocks client
// Replace this key with your secret key provided at https://liveblocks.io/dashboard/apikeys
const client = createClient({
publicApiKey: "pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
});

Liveblocks should now be installed into your project!

A room is the virtual space where people collaborate. To create a multiplayer experience, you’ll need to connect your users to a Liveblocks room following the instructions below.

You can easily connect to a room by using client.enter as shown below.

const room = client.enter("your-room-id");

Now that we have our room setup, we can start using Liveblocks Client methods to share any kind of data between users. For instance, Room.subscribe.others allows us to subscribe to the other users updates.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
<span>
{{message}}
</span>
</template>
<script>
import Vue from "vue";
import { createClient } from "@liveblocks/client";
// Create a liveblocks client
// Replace this key with your secret key provided at https://liveblocks.io/dashboard/apikeys
const client = createClient({
publicApiKey: "pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
});
export default Vue.extend({
data: function() {
return {
message: "You're the only one here."
};
},
mounted: function() {
const room = client.enter("your-room-id");
room.subscribe("others", this.onOthersChange);
this._room = room;
},
destroyed: function() {
this._room.unsubscribe("others", this.onOthersChange);
client.leave("your-room-id");
},
methods: {
onOthersChange: function(others) {
if (others.count === 0) {
this.message = "You're the only one here.";
} else if (others.count === 1) {
this.message = "There is one other person here.";
} else {
this.message = "There are " + others.count + " other people here.";
}
}
}
});
</script>

Using the public key allows you to use Liveblocks without implementing your own authentication endpoint. It’s great for prototyping and marketing websites.

If you want to implement your own security and define if the current user has access to a specific room, you can follow the Authentication guide.

If you are using Nuxt.js, you can also check the Nuxt.js Authentication guide.

Explore our examples below to see what you can do with Liveblocks.

  • Image of Live cursors

    Live cursors

    4 examples
    View
  • Image of Live avatar stack

    Live avatar stack

    2 examples
    View
  • Image of Live selection

    Live selection

    3 examples
    View