{"id":15045,"library":"vue-socket.io-extended","title":"Socket.io Bindings for Vue.js and Vuex","description":"Vue-Socket.io-Extended is a robust library that provides seamless integration of Socket.io with Vue.js applications, including comprehensive support for Vuex state management. The current stable version is `4.2.0`, which targets Vue 2.x. Development is active for `v5.0.0-alpha` releases, which introduce support for Vue 3.x. The project aims to offer a more stable, tested, and feature-rich alternative to its inspiration, Vue-Socket.io, focusing on aspects like reactive properties for connection status, automatic dispatching of Vuex actions/mutations based on socket events, and strong TypeScript support. Its release cadence shows periodic updates, with significant work being done for the next major Vue 3 compatible version. It differentiates itself with lightweight design, good TypeScript support (including decorators), and flexibility in handling Socket.io client versions.","status":"active","version":"4.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/probil/vue-socket.io-extended","tags":["javascript","vuejs","socket","vue","socket.io","websocket","socket.io-client","realtime","flux","typescript"],"install":[{"cmd":"npm install vue-socket.io-extended","lang":"bash","label":"npm"},{"cmd":"yarn add vue-socket.io-extended","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-socket.io-extended","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for establishing and managing Socket.io connections.","package":"socket.io-client","optional":false},{"reason":"Peer dependency as it's a Vue.js plugin.","package":"vue","optional":false},{"reason":"Optional dependency for integrating with Vuex stores to manage real-time state.","package":"vuex","optional":true}],"imports":[{"note":"This is the default export for the plugin itself, used with `Vue.use()`. CommonJS `require` is generally discouraged in modern Vue projects favoring ESM.","wrong":"const VueSocketIOExtended = require('vue-socket.io-extended');","symbol":"VueSocketIOExtended","correct":"import VueSocketIOExtended from 'vue-socket.io-extended';"},{"note":"`io` is a named export from `socket.io-client` in current versions, not a default export.","wrong":"import io from 'socket.io-client';","symbol":"io","correct":"import { io } from 'socket.io-client';"},{"note":"Since v5.0.0-alpha.3, the `@Socket()` decorator has a dedicated entrypoint. Previous versions might have exported it directly from the root. Requires `babel-plugin-transform-decorators-legacy` for Babel or `--experimentalDecorators` for TypeScript.","wrong":"import { Socket } from 'vue-socket.io-extended';","symbol":"Socket","correct":"import Socket from 'vue-socket.io-extended/decorator';"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueSocketIOExtended from 'vue-socket.io-extended';\nimport { io } from 'socket.io-client';\n\n// Assuming a Socket.io server is running at http://localhost:3000\nconst socketInstance = io('http://localhost:3000');\n\n// Optional: Import your Vuex store if you're using it\n// import store from './store';\n\nVue.use(VueSocketIOExtended, socketInstance, {\n  // Pass your Vuex store here if needed\n  // store: store,\n  // Optional: Set custom event transformers for Vuex (e.g., to match custom naming conventions)\n  // actionPrefix: 'SOCKET_', // Default\n  // mutationPrefix: 'SOCKET_'\n});\n\nnew Vue({\n  el: '#app',\n  data: () => ({ message: 'Waiting for messages...' }),\n  sockets: {\n    connect() {\n      console.log('Socket connected successfully!');\n      this.message = 'Connected to server!';\n    },\n    disconnect() {\n      console.log('Socket disconnected.');\n      this.message = 'Disconnected from server.';\n    },\n    // Listen for a custom 'chatMessage' event from the server\n    chatMessage(data: string) {\n      console.log('Received message:', data);\n      this.message = `Received: ${data}`;\n    }\n  },\n  methods: {\n    // Emit a 'sendMessage' event to the server\n    sendMessage(payload: string) {\n      if (this.$socket.connected) {\n        this.$socket.emit('sendMessage', payload);\n        console.log('Sent message:', payload);\n      } else {\n        console.warn('Socket not connected, message not sent.');\n      }\n    }\n  },\n  mounted() {\n    this.sendMessage('Hello from Vue.js!');\n  },\n  template: `\n    <div id=\"app\">\n      <h1>Vue-Socket.io-Extended Example</h1>\n      <p>{{ message }}</p>\n      <button @click=\"sendMessage('Ping from client!')\">Send Ping</button>\n      <p>Connection Status: {{ $socket.connected ? '🟢 Connected' : '🔴 Disconnected' }}</p>\n    </div>\n  `\n});","lang":"typescript","description":"This quickstart initializes Vue-Socket.io-Extended with a Socket.io client, demonstrates listening for connection status and custom events, and shows how to emit events from a Vue component. It targets Vue 2.x, the stable version."},"warnings":[{"fix":"For Vue 2 applications, stick to `vue-socket.io-extended@4.x.x`. For Vue 3, migrate to `vue-socket.io-extended@5.x.x` and adjust code accordingly for Composition API or updated Option API patterns.","message":"Version 5.0.0-alpha.1 introduced breaking changes, specifically dropping support for Vue 2.x in favor of Vue 3.x. Projects using Vue 2 must remain on the 4.x branch.","severity":"breaking","affected_versions":">=5.0.0-alpha.1"},{"fix":"Update imports from `import { Socket } from 'vue-socket.io-extended'` to `import Socket from 'vue-socket.io-extended/decorator'`.","message":"The `@Socket()` decorator's import path changed in v5.x. It is no longer exported from the root package.","severity":"breaking","affected_versions":">=5.0.0-alpha.3"},{"fix":"Configure your Babel or TypeScript compiler to properly transpile decorators. Consult the documentation for your specific project setup (e.g., Vue CLI, Vite).","message":"When using the `@Socket()` decorator, ensure your build setup supports ECMAScript stage 1 decorators. This typically requires `babel-plugin-transform-decorators-legacy` for Babel or enabling `--experimentalDecorators` in TypeScript.","severity":"gotcha","affected_versions":">=4.x"},{"fix":"Ensure your `socket.io-client` package version aligns with your `socket.io` server package version. Refer to Socket.io's migration guides for compatibility matrices between major versions.","message":"Socket.io server and client versions must be compatible. Major version mismatches (e.g., Socket.io client v3 with server v2) can lead to connection issues.","severity":"gotcha","affected_versions":">=4.x"},{"fix":"Follow the default naming convention or provide custom `actionPrefix` and `mutationPrefix` options during plugin installation.","message":"If integrating with Vuex, mutations should be prefixed with `SOCKET_` and actions with `socket_` by default to be automatically dispatched on socket events. This behavior is configurable.","severity":"gotcha","affected_versions":">=4.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueSocketIOExtended, socketInstance)` is called before creating your Vue app. Also verify `socket.io-client` is installed and `io()` is correctly used to create the `socketInstance`.","cause":"The `vue-socket.io-extended` plugin was not correctly installed via `Vue.use()` or the `socket.io-client` instance was not provided.","error":"TypeError: Cannot read properties of undefined (reading 'emit') or this.$socket is undefined"},{"fix":"Install the `socket.io-client` package: `npm install socket.io-client` or `yarn add socket.io-client`.","cause":"The `socket.io-client` package is a required dependency but is not installed in the project.","error":"Failed to compile / Module not found: Error: Can't resolve 'socket.io-client'"},{"fix":"On your Socket.io server, ensure CORS is correctly configured to allow requests from your Vue application's origin. For example, `const io = new Server(server, { cors: { origin: 'http://localhost:8080' } });`. Also, check the connection URL and any `path` options.","cause":"This often indicates a CORS (Cross-Origin Resource Sharing) issue or a mismatch in the Socket.io server configuration (e.g., path, transports).","error":"Error during WebSocket handshake: Unexpected response code: 400"},{"fix":"If you relied on `socket.on('connect_error')` or similar on the `Socket` instance, you might need to explicitly listen on the `Manager` instance (`socket.client.on('connect_error')`) or adapt your error handling strategy.","cause":"This is a change in behavior in `socket.io` version 3.x, where the `Socket` instance no longer automatically re-emits events from its underlying `Manager` (e.g., `connect_error`).","error":"The Socket instance will no longer forward the events emitted by its Manager"}],"ecosystem":"npm"}