Get started - Get started with Vue.js

In this guide, you’ll learn how to use integrate Liveblocks with Vue.js. The @liveblocks/client package provides the Liveblocks Presence and Storage APIs you’ll be integrating with.

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

Install Liveblocks into your project

Install the Liveblocks client package

Run the following command to install the Liveblocks client package:

npm install @liveblocks/client

@liveblocks/client lets you connect to Liveblocks servers.

Connect to Liveblocks

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

import { createClient } from "@liveblocks/client";
// Create a Liveblocks client// Replace this key with your secret key provided at// https://liveblocks.io/dashboard/projects/{projectId}/apikeysconst client = createClient({  publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});

Liveblocks should now be installed into your project!

Connect to a Liveblocks room

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.

Using Client.enter to connect to a room

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

const room = client.enter("your-room-id", { initialPresence: {} });

Using Liveblocks Client methods

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.

With the Vue Options API

<template>  <span>{{message}}</span></template>
<script>  import { createClient } from "@liveblocks/client";
  // Create a Liveblocks client  // Replace this key with your secret key provided at  // https://liveblocks.io/dashboard/projects/{projectId}/apikeys  const client = createClient({    publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",  });    const roomId = "my-room";
  export default {    data() {      return {        message: "You’re the only one here.",      };    },    mounted() {      const room = client.enter(roomId, { initialPresence: {} });      this._unsubscribeOthers = room.subscribe("others", this.onOthersChange);    },    unmounted() {      this._unsubscribeOthers();      client.leave(roomId);    },    methods: {      onOthersChange(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>

With the Vue Composition API

<script setup>  import { onUnmounted, ref } from "vue";  import { createClient } from "@liveblocks/client";
  // Create a Liveblocks client  // Replace this key with your secret key provided at  // https://liveblocks.io/dashboard/projects/{projectId}/apikeys  const client = createClient({    publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",  });
  const roomId = "my-room";  const room = client.enter(roomId, { initialPresence: {} });    const message = ref("You’re the only one here.");    function onOthersChange(others) {    if (others.count === 0) {      message.value = "You’re the only one here.";    } else if (others.count === 1) {      message.value = "There is one other person here.";    } else {      message.value = "There are " + others.count + " other people here.";    }  }
  const unsubscribeOthers = room.subscribe("others", onOthersChange);
  onUnmounted(() => {    unsubscribeOthers();    client.leave(roomId);  });</script>
<template>  <span>{{message}}</span></template>

Bonus: setup authentication endpoint

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.