Nuxt3-socket.io NPM

nuxt3-socket.io

!WARNING
This module will soon be deprecated in favor of the built-in WebSocket API.

Just another socket.io module for Nuxt 3.

This module uses the Vite server in development and req.socket.server in production.

Install

pnpm add nuxt3-socket.io

export default defineNuxtConfig({
  modules: ['nuxt3-socket.io'],
  socket: {
    // JSON serializable options only.
    // options object to pass when instantiating socket server.
    serverOptions: {}
  }
})

Usage

Client

<script setup>
// Default
const socket = useSocket()

const connected = ref(false)

onMounted(() => {
  socket.on('connect', () => {
    connected.value = socket.connected
  })

  socket.on('disconnect', () => {
    connected.value = socket.connected
  })
})

// Custom
const { $io } = useNuxtApp()

onMounted(() => {
  const socket2 = $io('http://localhost:3069')
})
</script>

<template>
  <div>Connected: {{ connected }}</div>
</template>

Server

By default, this module automatically creates a server instance. If you want access to that server instance, you can expose functions inside server/socket and use the defineIOHandler wrapper function:

// server/socket/example.ts
import { defineIOHandler } from 'nuxt3-socket.io/helpers'

export default defineIOHandler((io) => {
  io.on('connection', (socket) => {
    console.log('Connected ', socket.id)
  })
})

It's recommended to roll your own socket server if you need more customization other than what is specified here.