Niche Portobello Mushroom

    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    npm npm NPM

    📖 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

    Important updates

    • 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 2.x:
    npm i nuxt-socket-io
    • Nuxt 3.x:
    npm i nuxt-socket-io@next
    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
    • Demos and examples, and link to a codesandbox so you can try things out as you follow along!
    • All the old docs that you originally saw here were moved there and better organized. Things should be much easier to follow now!


    • 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


    npm i nuxt-socket-io

    DownloadsWeekly Downloads






    Unpacked Size

    53.5 kB

    Total Files


    Last publish


    • richardeschloss