# Integration Guide

## Add floors.js to _Nuxt_

Add one line to your nuxt.config. floors.js detects route changes from Vue Router automatically — no Nuxt plugin, no composable, no npm package.

## How it works

floors.js runs **completely outside Nuxt and Vue**. It loads as a standalone script that patches the browser's history APIs — `pushState`, `replaceState`, and the `popstate` event — to detect route changes in your app.

Under the hood, Nuxt uses Vue Router for all navigation. When a visitor moves from `/pricing` to `/docs/getting-started`, Vue Router calls `pushState`, and floors.js picks that up automatically. No Nuxt plugin, no Vue composable, no re-renders.

Because it works at the browser level, it's compatible with **Nuxt 3, Nuxt 2, file-based routing, dynamic routes, and middleware** — all out of the box.

## Installation

There are two ways to add floors.js to a Nuxt app. Both work identically.

**Option 1** — nuxt.config.ts (recommended):

```javascript
// nuxt.config.ts

export default defineNuxtConfig({

app: {

head: {

script: [
        { src: 'https://floorsjs.com/embed.js', 'data-key': 'flr_...' } 
      ]
    }
  }
})
```

**Option 2** — useHead in app.vue or layouts/default.vue:

```html
<!-- app.vue or layouts/default.vue -->

<script setup>
useHead({
  script: [{ src: 'https://floorsjs.com/embed.js', 'data-key': 'flr_...' }]
})
</script>
```

Replace `flr_...` with your site key from the floors.js dashboard. The script loads asynchronously and won't block your app's rendering or hydration.

## Works with Nuxt routing

Nuxt's file-based routing maps directly to floors.js rooms. Every route in your `pages/` directory becomes a room that visitors can inhabit together.

- **Static routes** — `pages/about.vue` → visitors on `/about` are in the same room
- **Dynamic routes** — `pages/blog/[slug].vue` → each blog post is its own room
- **Nested routes** — `pages/dashboard/settings.vue` → `/dashboard/settings` is a separate room
- **Catch-all routes** — `pages/[...slug].vue` → each resolved path gets its own room

No configuration needed. Middleware, layouts, and route guards don't affect floors.js — it only cares about the final URL in the browser.

## Configuration

All settings are managed from your [floors.js dashboard](/content/dashboard/index.html). Changes apply instantly, no code update needed. You can also use attributes in `nuxt.config` as an optional fallback.

```javascript
{ src: 'https://floorsjs.com/embed.js', 'data-key': 'flr_...' }
```

- **data-key** (required) — your site key, used to group visitors across your domain
- **data-server** (optional) — custom WebSocket server URL if you're self-hosting

See the [full list of data-attributes](/#docs) in the docs.

## FAQ

**Do I need a Nuxt plugin?**

No. floors.js is a standalone script that runs entirely outside Nuxt's plugin system. There's no module, no composable, no build-time integration. Just a script tag.

**Does it work with Nuxt 2?**

Yes. In Nuxt 2, add the script to the `head` property in `nuxt.config.js` using `script: [{ src: 'https://floorsjs.com/embed.js', 'data-key': 'flr_...' }]`. Works the same way.

**What about SSR?**

floors.js only runs client-side. During server-side rendering, the script tag is included in the HTML but doesn't execute until the browser loads it. No SSR errors, no hydration mismatches.

**Works with Nuxt Content?**

Yes. Each Nuxt Content page (Markdown, MDC, or YAML) gets its own URL, which becomes its own room in floors.js. Readers on the same docs page see each other automatically.

**Can I load it conditionally?**

Yes. Wrap the `useHead` call in a `process.client` check or use a `v-if` condition to only inject the script for certain users or environments.

## Alternatives & Comparisons

- [Intercom Alternative](/content/alternatives/intercom/index.html)  
- [Crisp Alternative](/content/alternatives/crisp/index.html)  
- [Tidio Alternative](/content/alternatives/tidio/index.html)  
- [tawk.to Alternative](/content/alternatives/tawk-to/index.html)  
- [vs Gather](/content/vs/gather/index.html)  
- [vs SpatialChat](/content/vs/spatial-chat/index.html)

## Welcome to floors.js - Live Demo

Enter the building to see and chat with other visitors in real-time.

---