Getting Started

Installation

Install and configure Nuxt Realtime in your Nuxt application.

Quick Start

Install the module with one command:

pnpm add nuxt-realtime

Configuration

Add nuxt-realtime to your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-realtime'],

  // Enable WebSocket support in Nitro
  nitro: {
    experimental: {
      websocket: true,
    },
  },

  // Optional: Configure the module
  nuxtRealtime: {
    storage: {
      driver: 'memory', // Default storage driver
    },
  },
})

Storage Configuration

Nuxt Realtime uses unstorage for state persistence. You can configure different storage drivers:

Memory (Default)

nuxt.config.ts
export default defineNuxtConfig({
  nuxtRealtime: {
    storage: {
      driver: 'memory',
    },
  },
})

Redis

For production with multiple server instances, use Redis:

nuxt.config.ts
export default defineNuxtConfig({
  nuxtRealtime: {
    storage: {
      driver: 'redis',
      host: 'localhost',
      port: 6379,
    },
  },
})
See the unstorage documentation for all available drivers.

Requirements

  • Nuxt 3.x or Nuxt 4.x
  • Node.js 18+
  • WebSocket support enabled in Nitro

That's it! You can now use the realtime composables in your components.