Nuxt 2 reached End-of-Life on June 30th, 2024.

This module is not yet compatible with Nuxt 3

Head over to

socket-io client and server module for Nuxt. Just plug it in and GO

npmnpmGitHub Workflow StatusNPM

📖 Release Notes

nuxt-socket-io client and server module for Nuxt


  • Configuration of multiple IO sockets
  • Configuration of per-socket namespaces (simplified format)
  • Automatic IO Server Registration
  • Socket IO Status
  • Automatic Error Handling
  • Debug logging, enabled with localStorage item 'debug' set to 'nuxt-socket-io'
  • Automatic Teardown, enabled by default
  • $nuxtSocket vuex module and socket persistence in vuex
  • Support for dynamic APIs using the KISS API format
  • Support for the IO config in the new Nuxt runtime config (for Nuxt versions >= 2.13)
  • Automatic middleware registration
  • ES module
  • Experimental support for ioRedis

Important updates

  • v3.x has been tested against Nuxt3 stable and If you absolutely require it's recommended to install it and follow the workaround.
  • v2.x may contain breaking changes in it's attempt to get Nuxt3 reaady. npm i nuxt-socket@1 should help revert any breaking changes in your code.
    • VuexOpts types and Namespace configuration types changed. Entries with the Record<string, string> have been deprecated in favor of string-only entries, which are easier to work with.
    • Package type is now "module". Entirely ESM.
    • Tested against node lts (16.x).
  • v1.1.17+ uses 4.x. You may find the migration here
  • v1.1.14+ uses 3.x. You may find the migration here
  • v1.1.13 uses 2.x.


  1. Add nuxt-socket-io dependency to your project
  • Nuxt 3.x:
npm i nuxt-socket-io
  • Nuxt 2.x:
npm i nuxt-socket-io@2
  1. Add nuxt-socket-io to the modules section of nuxt.config.js
  modules: [
  io: {
    // module options
    sockets: [{
      name: 'main',
      url: 'http://localhost:3000'
  1. Use it in your components:
  mounted() {
    this.socket = this.$nuxtSocket({
      channel: '/index'
    /* Listen for events: */
    .on('someEvent', (msg, cb) => {
      /* Handle event */
  methods: {
    method1() {
      /* Emit events */
      this.socket.emit('method1', {
        hello: 'world' 
      }, (resp) => {
        /* Handle response, if any */


But WAIT! There's so much more you can do!! Check out the documentation:

There you will see:

  • More details about the features, configuration and usage


  • Follow me and the series on
  • Client docs here
  • Server docs here


  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using yarn dev or npm run dev