> For the complete documentation index, see [llms.txt](https://docs.robinapp.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.robinapp.co/messaging-with-robin/guides/integrating-robin-in-your-nuxt.js-app.md).

# Integrating Robin in your Nuxt.js app

Because Nuxt is built on Vue, the integration process is kind of similar to [the Vue integration](/messaging-with-robin/sdks-for-ui-kit/robin-with-vue.md). 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](/messaging-with-robin/guides/setting-up-your-robin-account.md) to learn more.
* User token ([RUT](/messaging-with-robin/guides/what-is-the-robin-user-token-rut.md)) 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

```bash
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:

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

Vue.use(RobinChat)
```

{% hint style="info" %}
You need to import the CSS because the `RobinChat` component does not include any CSS itself.
{% endhint %}

### 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.

```jsx
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.

```jsx
<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](/messaging-with-robin/guides/the-what-and-why-robin-keys.md) to completely understand it.