Wondering what’s next for npm?Check out our public roadmap! »

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

    1.1.17 • Public • Published

    npm npm NPM

    📖 Release Notes

    nuxt-socket-io

    Socket.io client and server module for Nuxt

    Features

    • Configuration of multiple IO sockets
    • Configuration of per-socket namespaces
    • 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

    Important update

    • v1.1.14+ uses socket.io 3.x. You may find the migration here
    • v1.1.13 uses socket.io 2.x . Clamp the version to 1.1.13 if not ready to update.

    Setup

    1. Add nuxt-socket-io dependency to your project
    yarn add nuxt-socket-io # or npm install nuxt-socket-io
    1. Add nuxt-socket-io to the modules section of nuxt.config.js
    {
      modules: [
        'nuxt-socket-io',
      ],
      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: */
        this.socket
        .on('someEvent', (msg, cb) => {
          /* Handle event */
        })
      },
      methods: {
        method1() {
          /* Emit events */
          this.socket.emit('method1', {
            hello: 'world' 
          }, (resp) => {
            /* Handle response, if any */
          })
        }
      }
    }

    Documentation

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

    https://nuxt-socket-io.netlify.app/

    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!

    Resources

    • Follow me and the series on medium.com
    • Socket.io Client docs here
    • Socket.io Server docs here

    Development

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

    Install

    npm i nuxt-socket-io

    DownloadsWeekly Downloads

    2,322

    Version

    1.1.17

    License

    MIT

    Unpacked Size

    66.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar