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.

GitHub - robin-io/robin-vueGitHub

Do you build frontend apps with React? Check out Robin with React instead.

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
2. Current user’s 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

NPM

npm install robin-vue --save

Yarn

yarn add robin-vue

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

// main.js 

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

Vue.use(RobinChat)

Mount Component

// 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>

Want to customize Robin to match your app’s theme? Check out Customizing Robin for your Brand

Robin Messaging Preview

Here is a live demo of Robin Messaging with Vue.

Robin Demo - Vue (Nuxt) - StackBlitzStackBlitz