---
url: https://talkjs.com/docs/Guides/JavaScript/Classic/Vue
---

# Vue

Add TalkJS chat and start a conversation in your Vue app.

Ask a question Copy for LLM [View as Markdown](/docs/Guides/JavaScript/Classic/Vue.md)
This guide will help you add TalkJS to your Vue app and create a chat between users with the [JavaScript SDK](/docs/UI_Components/JavaScript/).

In the guide we'll walk you through installing TalkJS, creating a chatbox and starting a conversation. For the full code for this example, see the [Vue getting started example](https://github.com/talkjs/talkjs-examples/tree/master/vue/vue-getting-started) in our GitHub repo.

## Prerequisites

To make the most of this guide, you need:

- A [TalkJS account](/dashboard/)
- A [Vue app](https://vuejs.org/guide/quick-start) that you want to add TalkJS to

## Install TalkJS

To get started, install the `talkjs` package:

**npm**
```shell
npm install talkjs
```

**yarn**
```shell
yarn add talkjs
```

## Add TalkJS to your app

Next, add TalkJS to your app. Create a `Chat.vue` Single-File Component wherever you keep your components in your project.

In `Chat.vue`, add a script tag with Vue's [`setup` attribute](https://vuejs.org/api/sfc-script-setup) and import TalkJS:

```js
// Chat.vue
<script setup>import Talk from 'talkjs';</script>
```

Then, for either a [chatbox](/docs/Features/Chat_UIs/#chatbox/) or an [inbox](/docs/Features/Chat_UIs/#inbox/) pre-built chat UI, add this container element to the template of `Chat.vue`:

```js
// Chat.vue
<template>
  <div id="talkjs-container" style="width: 100%; height: 500px">
    <i>Loading chat...</i>
  </div>
</template>
```

If you're adding a [popup](/docs/Features/Chat_UIs/#popup/) UI, you can omit this container, as the popup gets overlaid on top of your page. By default the popup displays in the bottom right corner, but you can [change the position of the popup button on your page](/resources/how-to-customize-the-popup-open-and-close-button/).

You can then import this component in the place you want it in your app, for example in `App.vue`:

```js
// App.vue
<script setup>
  import Chat from "./components/Chat.vue";
</script>

<template>
  <main>
    <Chat />
  </main>
</template>
```

## View an existing conversation

You can now view a conversation. Add the following code to your `Chat.vue` file:

**Chatbox**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    Talk.ready.then(() => {
      const session = new Talk.Session({
        appId: '<APP_ID>',
        userId: 'sample_user_alice',
      });

      const chatbox = session.createChatbox();
      chatbox.select('sample_conversation');
      chatbox.mount(document.getElementById('talkjs-container'));
    });
  });
</script>
```

**Inbox**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    Talk.ready.then(() => {
      const session = new Talk.Session({
        appId: '<APP_ID>',
        userId: 'sample_user_alice',
      });

      const inbox = session.createInbox();
      inbox.select('sample_conversation');
      inbox.mount(document.getElementById('talkjs-container'));
    });
  });
</script>
```

**Popup**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    const session = new Talk.Session({
      appId: '<APP_ID>',
      userId: 'sample_user_alice',
    });

    const popup = session.createPopup();
    popup.select('sample_conversation');
    popup.mount({ show: false });
  });
</script>
```

To set up your chat as soon as the Chat component gets mounted, this code uses Vue's [`onMounted()`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) lifecycle hook.

Let's step through what the code inside `Talk.ready.then` is doing:

- You make a connection to the TalkJS servers, known as a [session](/docs/Concepts/Sessions/). You'll need to replace `<APP_ID>` with your own app ID, which you can find on the **Settings** page of your TalkJS [dashboard](/dashboard/login). For this tutorial, we recommend using the app ID for TalkJS's [test mode](/docs/Features/Environments/), which has built-in sample users and conversations which you'll use in this tutorial. You'll also need to specify a [current user](/docs/Concepts/Sessions/#userId) to send messages as. In this example, you're setting `userId` to be an existing user, the `sample_user_alice` sample user.

- Then you create the chat UI. Call the [`createChatbox` method](/docs/UI_Components/JavaScript/Classic/Session/#Session__createChatbox) for a chatbox, [`createInbox`](/docs/UI_Components/JavaScript/Classic/Session/#Session__createChatbox) for an inbox, or [`createPopup`](/docs/UI_Components/JavaScript/Classic/Session/#Session__createPopup) for a popup UI. Use the [`select`](/docs/UI_Components/JavaScript/Classic/Chatbox/#Chatbox__select) method to display the sample conversation, and then use the [`mount`](/docs/UI_Components/JavaScript/Classic/Chatbox/#Chatbox__mount) method to render the UI. (The methods here are linked for the chatbox, but are also available on the inbox and popup UI.)
Run your app. For example, for the chatbox UI, you should get something like the following:

*Loading chat...*
Try sending Sebastian a message! You can also try switching your `userId` to `sample_user_sebastian` and viewing the other side of the conversation.

If the chat window doesn't show up, make sure that you entered your app ID, replacing `<APP_ID>` in the code.

## Create new users and conversations

So far in this guide you've used a sample user and conversation. Next, you'll create new users and a conversation between them, and sync them with the TalkJS servers. Usually, you would create users based on the data from your database. For this getting started guide, you'll hard-code some user data instead.

First, let's add a new current user, Nina, and a new conversation. Update your code with the highlighted lines:

**Chatbox**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();

  const chatbox = session.createChatbox();
  chatbox.select(conversationRef);
  chatbox.mount(document.getElementById('talkjs-container'));
});
```

**Inbox**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();

  const inbox = session.createInbox();
  inbox.select(conversationRef);
  inbox.mount(document.getElementById('talkjs-container'));
});
```

**Popup**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();

  const popup = session.createPopup();
  popup.select(conversationRef);
  popup.mount({ show: false });
});
```

Here you connect to TalkJS as a user with an ID of `nina`, and set initial user data if she does not yet exist. You then get a reference to a conversation with an ID of `new_conversation`, and set initial conversation data if it does not yet exist.

Next, create a second user, Frank, and add them to the conversation:

**Chatbox**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const otherRef = session.user("frank");
  otherRef.createIfNotExists({
    name: "Frank",
    email: "frank@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
    welcomeMessage: "Hey, how can I help?",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const chatbox = session.createChatbox();
  chatbox.select(conversationRef);
  chatbox.mount(document.getElementById('talkjs-container'));
});
```

**Inbox**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const otherRef = session.user("frank");
  otherRef.createIfNotExists({
    name: "Frank",
    email: "frank@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
    welcomeMessage: "Hey, how can I help?",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const inbox = session.createInbox();
  inbox.select(conversationRef);
  inbox.mount(document.getElementById('talkjs-container'));
});
```

**Popup**
```javascript
// Chat.vue
Talk.ready.then(() => {
  const session = new Talk.Session({
    appId: "<APP_ID>",
    userId: "nina",
  });
  session.currentUser.createIfNotExists({
    name: "Nina",
    email: "nina@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
    welcomeMessage: "Hi!",
  });

  const otherRef = session.user("frank");
  otherRef.createIfNotExists({
    name: "Frank",
    email: "frank@example.com",
    photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
    welcomeMessage: "Hey, how can I help?",
  });

  const conversationRef = session.conversation("new_conversation");
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const popup = session.createPopup();
  popup.select(conversationRef);
  popup.mount({ show: false });
});
```

In this updated code, you get a reference to the other user, `frank`, and set initial user data if he does not yet exist. You then get a reference to the `frank` participant in the conversation, and create the participant if it does not already exist, adding `frank` to the conversation.

You should now get something like the following:

You can also create and sync [users](/docs/REST_API/Users/#creating-or-updating-a-user) or [conversations](/docs/REST_API/Conversations/#setting-conversation-data) from your backend with
the [REST API](/docs/REST_API/). If you
want to only sync users or conversations with the REST API, you can disable syncing in the browser. See [Browser
Synchronization](/docs/Features/Security/Browser_Synchronization/) for
more details.

That's it! You now have a working chat component in your Vue app.

## Next steps

In this guide, you've added powerful user-to-user chat to your Vue app. You also learned more about the fundamentals of TalkJS, and how it all fits together.

Most importantly, you've built a starting point to try out all the features TalkJS offers. For example, you could create a new UI theme in the [Theme Editor](/docs/Features/Themes/), customize your chat with [action buttons](/docs/Guides/JavaScript/Classic/Action_Buttons_Links/) or [HTML panels](/docs/Guides/JavaScript/Classic/HTML_Panels/), or enable [email notifications](/docs/Features/Notifications/Email_Notifications/).

Before you go live, make sure you enable authentication. Authentication keeps your user data secure, by ensuring that only legitimate users can connect to your chat. For details, see: [Authentication](/docs/Features/Security/Authentication/).

## Full code example

Here's what your working example should look like, in full:

**Chatbox**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    Talk.ready.then(function () {
      const session = new Talk.Session({
        appId: "<APP_ID>",
        userId: "nina",
      });
      session.currentUser.createIfNotExists({
        name: "Nina",
        email: "nina@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
        welcomeMessage: "Hi!",
      });

      const otherRef = session.user("frank");
      otherRef.createIfNotExists({
        name: "Frank",
        email: "frank@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
        welcomeMessage: "Hey, how can I help?",
      });

      const conversationRef = session.conversation("new_conversation");
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const chatbox = session.createChatbox();
      chatbox.select(conversationRef);
      chatbox.mount(document.getElementById("talkjs-container"));
    });
  });
</script>

<template>
  <div id="talkjs-container" style="width: 100%; height: 500px">
    <i>Loading chat...</i>
  </div>
</template>
```

**Inbox**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    Talk.ready.then(() => {
      const session = new Talk.Session({
        appId: "<APP_ID>",
        userId: "nina",
      });
      session.currentUser.createIfNotExists({
        name: "Nina",
        email: "nina@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
        welcomeMessage: "Hi!",
      });

      const otherRef = session.user("frank");
      otherRef.createIfNotExists({
        name: "Frank",
        email: "frank@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
        welcomeMessage: "Hey, how can I help?",
      });

      const conversationRef = session.conversation("new_conversation");
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const inbox = session.createInbox();
      inbox.select(conversationRef);
      inbox.mount(document.getElementById('talkjs-container'));
    });
  });
</script>

<template>
  <div id="talkjs-container" style="width: 100%; height: 500px">
    <i>Loading chat...</i>
  </div>
</template>
```

**Popup**
```js
// Chat.vue
<script setup>
  import Talk from 'talkjs';
  import { onMounted } from 'vue';

  onMounted(() => {
    Talk.ready.then(() => {
      const session = new Talk.Session({
        appId: "<APP_ID>",
        userId: "nina",
      });
      session.currentUser.createIfNotExists({
        name: "Nina",
        email: "nina@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
        welcomeMessage: "Hi!",
      });

      const otherRef = session.user("frank");
      otherRef.createIfNotExists({
        name: "Frank",
        email: "frank@example.com",
        photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
        welcomeMessage: "Hey, how can I help?",
      });

      const conversationRef = session.conversation("new_conversation");
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const popup = session.createPopup();
      popup.select(conversationRef);
      popup.mount({ show: false });
    });
  });
</script>

<template>
  <div id="talkjs-container" style="width: 100%; height: 500px">
    <i>Loading chat...</i>
  </div>
</template>
```

For full working code for this example, see the [Vue getting started GitHub repo](https://github.com/talkjs/talkjs-examples/tree/master/vue/vue-getting-started).