# Robin with Vue

### Add Messaging to Your Vue App

Add chat functionality to your Vue app — whether you are building for mobile-first or desktop users, customize Robin UI to match your app’s theme. Take advantage of the Robin API and deploy messaging solutions in very little time.

{% embed url="<https://github.com/robin-io/robin-vue>" %}

{% hint style="info" %}
Do you build frontend apps with React? Check out [Robin with React](https://docs.robinapp.co/messaging-with-robin/sdks-for-ui-kit/robin-with-react) instead.
{% endhint %}

### Prerequisites

The following are required to get your chat app up and running:

1. API Key - Learn about how to get your API Keys in [Setting up your Robin account](https://docs.robinapp.co/guides/setting-up-your-robin-account#api-keys)
2. Current user’s [RUT](https://docs.robinapp.co/messaging-with-robin/guides/what-is-the-robin-user-token-rut) and Name - Robin User Token is a Unique Identifier of every user in your Robin App.
3. All users to be included in your chat app.

### Install the Vue SDK

{% tabs %}
{% tab title="NPM" %}

```bash
npm install robin-vue --save
```

{% endtab %}

{% tab title="Yarn" %}

```bash
yarn add robin-vue
```

{% endtab %}
{% endtabs %}

### Mount Robin and Start Messaging

You can set up Robin quickly by registering the plugin in your Javascript entry file and mounting the `RobinChat` component in your Vue template with its required props.

#### Register Plugin

```jsx
// main.js 

import Vue from 'vue'
import RobinChat from 'robin-vue'
import 'robin-vue/dist/style.css'

Vue.use(RobinChat)
```

#### Mount Component

```jsx
// App.vue

<template>
    <RobinChat 
        api-key="YOUR_API_KEY" 
        :users="[]" //YOUR_LIST_OF_USERS 
        user-token="YOUR_ROBIN_USER_TOKEN" 
        user-name="YOUR_USERNANE" />
</template>
```

{% hint style="info" %}
Want to customize Robin to match your app’s theme? Check out [Customizing Robin for your Brand](https://docs.robinapp.co/messaging-with-robin/guides/customizing-robin-for-your-brand)
{% endhint %}

### Robin Messaging Preview

Here is a live demo of Robin Messaging with Vue.

{% embed url="<https://stackblitz.com/edit/nuxt-starter-wsbhha?file=pages/index.vue>" %}