{"id":49689,"library":"vue3-websocket","title":"Vue 3 WebSocket","description":"A lightweight Vue 3 plugin for integrating WebSocket connections using the Composition API. Current stable version 2.2.0 (released 2023-09). Provides both a plugin (Vue3Websocket) and composable (useWebSocket) for reactive WebSocket communication. Key differentiator: designed specifically for Vue 3's Composition API with automatic lifecycle management and reactive state. Unlike generic WebSocket wrappers, it handles reconnection, message handling as reactive data, and integrates seamlessly with Vue's reactivity system. Released under MIT, maintained by a solo developer with monthly updates. Supports TypeScript out of the box.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/muzychenka/vue3-websocket","tags":["javascript","vue3","vue","websocket","composition","api","typescript"],"install":[{"cmd":"npm install vue3-websocket","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-websocket","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-websocket","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin and composable to work with Vue 3 reactivity system","package":"vue","optional":false}],"imports":[{"note":"Requires named import for the plugin (default export is not available).","wrong":"import Vue3Websocket from 'vue3-websocket'","symbol":"Vue3Websocket","correct":"import { Vue3Websocket } from 'vue3-websocket'"},{"note":"ESM only; CommonJS require is not supported.","wrong":"const { useWebSocket } = require('vue3-websocket')","symbol":"useWebSocket","correct":"import { useWebSocket } from 'vue3-websocket'"},{"note":"TypeScript type export for connection status enum (CONNECTING, OPEN, CLOSING, CLOSED).","wrong":null,"symbol":"WebSocketStatus","correct":"import { WebSocketStatus } from 'vue3-websocket'"},{"note":"Use 'import type' for type-only imports in TypeScript to avoid runtime errors.","wrong":"import { UseWebSocketOptions } from 'vue3-websocket'","symbol":"UseWebSocketOptions","correct":"import type { UseWebSocketOptions } from 'vue3-websocket'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { Vue3Websocket, useWebSocket } from 'vue3-websocket';\n\nconst app = createApp(App);\napp.use(Vue3Websocket, {\n  url: 'ws://localhost:8080',\n  options: {\n    reconnection: true,\n    reconnectionAttempts: 5,\n    reconnectionDelay: 3000,\n    heartbeat: {\n      enabled: true,\n      interval: 30000,\n      message: 'ping'\n    }\n  }\n});\napp.mount('#app');\n\n// In a component:\nconst { status, data, send, close } = useWebSocket();\n\n// Send message\nsend(JSON.stringify({ action: 'subscribe', channel: 'chat' }));\n\n// Reactive data updates when message received\nconsole.log(data.value);\n\n// Connection status\nif (status.value === 'OPEN') {\n  console.log('Connected');\n}","lang":"typescript","description":"Registers the WebSocket plugin globally with reconnection and heartbeat, then uses the composable to send messages and reactively receive data."},"warnings":[{"fix":"Use named imports: import { Vue3Websocket, useWebSocket } from 'vue3-websocket'","message":"v2.x removed the old Options API integration and default export. Only Composition API and named exports are supported.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always register the plugin with app.use() before using useWebSocket.","message":"If you don't call app.use(Vue3Websocket, { url: ... }), useWebSocket will throw an error because it needs the global plugin configuration.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use 'reconnectionDelay' instead of 'reconnectInterval'.","message":"Options like 'reconnectInterval' were renamed to 'reconnectionDelay' in v2.0.0.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Pass url as a separate property: { url: '...', options: { ... } }","message":"The 'options' object in app.use doesn't support nested 'url' inside 'options'; url must be at the top level.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure the composable is called inside a component that is a descendant of the app root.","message":"Using 'useWebSocket' without a preceding plugin registration or within a component outside the app tree will cause a silent failure or undefined behavior.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'-09':23 '2.2.0':20 '2023':22 '3':2,7,42 'api':16,45,95 'automat':47 'box':89 'communic':35 'compos':30 'composit':15,44,94 'connect':12 'current':17 'data':64 'design':38 'develop':80 'differenti':37 'generic':54 'handl':58,61 'integr':10,66 'javascript':90 'key':36 'lifecycl':48 'lightweight':5 'maintain':76 'manag':49 'messag':60 'mit':75 'month':82 'plugin':8,27 'provid':24 'reactiv':33,51,63,71 'reconnect':59 'releas':21,73 'seamless':67 'solo':79 'specif':39 'stabl':18 'state':52 'support':84 'system':72 'typescript':85,96 'unlik':53 'updat':83 'use':13 'usewebsocket':31 'version':19 'vue':1,6,41,69,92 'vue3':91 'vue3websocket':28 'websocket':3,11,34,55,93 'wrapper':56","created_at":"2026-06-07T17:03:05.796310+00:00","updated_at":"2026-06-07T17:03:05.796310+00:00","problems":[{"fix":"Add app.use(Vue3Websocket, { url: 'ws://yourserver' }) in main.js.","cause":"Vue3Websocket plugin not registered or url not provided in plugin options.","error":"Cannot read properties of undefined (reading 'url')"},{"fix":"Use import { useWebSocket } from 'vue3-websocket'.","cause":"Using default import instead of named import for useWebSocket.","error":"Uncaught TypeError: vue3_websocket__WEBPACK_IMPORTED_MODULE_0__.useWebSocket is not a function"},{"fix":"Ensure URL starts with 'ws://' or 'wss://' and is correctly formatted.","cause":"Invalid WebSocket URL (e.g., missing protocol or incorrect host).","error":"vue3-websocket: WebSocket connection failed to connect: The URL '...' is invalid."},{"fix":"Check that the WebSocket is open before calling send; wait for status.value === 'OPEN'.","cause":"useWebSocket returned undefined or send method not available (connection not established).","error":"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'send')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/muzychenka/vue3-websocket","github":"https://github.com/muzychenka/vue3-websocket","docs":null,"changelog":null,"pypi":null,"npm":"vue3-websocket","openapi_spec":null,"status_page":null,"smithery":null,"categories":["messaging"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}