Integrating Robin in your Nuxt.js app

Because Nuxt is built on Vue, the integration process is kind of similar to the Vue integration. However, due to Nuxt’s Server-Side Rendering (SSR) feature, there are a few extra things we need to take note of.

Prerequisites

To integrate Robin in your Nuxt app, there are a couple of requirements you need to get ready:

• API Key - The unique key for your Robin App. Visit Setting up your Robin account to learn more.

• User token (RUT) and name - These are what Robin uses to identify you as a user of a Robin app.

• Users - The users you want available on your app (i.e all the users you might want to have conversations with).

When you have these ready, you can go ahead with the integration.

Install Vue SDK

npm install robin-vue

## OR

yarn add robin-vue

Setup the Robin Plugin

In your plugins directory, create a robin.js file with the plugin setup:

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

Vue.use(RobinChat)

You need to import the CSS because the RobinChat component does not include any CSS itself.

Register the Robin Plugin

If you do not specify the Robin plugin as a plugin in your nuxt.config.js file, it won’t be available in your Nuxt app.

export default {
  // ...
  plugins: [
    { src: '~/plugins/robin.js', mode: 'client' }
  ]
}

Use the Plugin

This is where you use the Robin UI Kit in your Nuxt app. Here, you’ll make use of those prerequisites we discussed earlier.

<template>
  <!-- ... -->
  <RobinChat
    :api-key="apiKey"
    :user-token="userToken"
    :user-name="userName"
    :keys="keys"
    :users="users"
  />
</template>

<script>
export default {
  data () {
    return {
      apiKey: 'YOUR_API_KEY',
      userToken: 'YOUR_RUT',
      userName: 'YOUR_NAME',
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
	{
          user_token: '',
          profile_image: '',
          user_name: ''
        },
        {
          user_token: '',
          profile_image: '',
          user_name: ''
        }
      ]
    }
  }
}
</script>

Robin Keys

One of the props passed to the RobinChat component above is the keys prop. This prop was not included as one of the prerequisites because it is optional. However, it is something you should take note of. See The What and Why: Robin Keys to completely understand it.