Registry / messaging / vue-simple-websocket

vue-simple-websocket

library1.0.0jsnpmunverified

vue-simple-websocket v1.0.0 is a lightweight Vue.js plugin that provides a native reconnecting WebSocket client. It integrates seamlessly with Vue 3 using the plugin system, exposing a `$socketClient` global property with event handlers for open, message, close, and error events. Key differentiators include automatic reconnection with configurable intervals and a convenience `sendObj` method for sending JavaScript objects. The package is actively maintained but noted as still maturing; it has separate documentation for Vue 2.x support. Alternative solutions include Vue Socket.io and vue-native-websocket.

messaging

npm install vue-simple-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SIMPLE-WEBSOCK

vue-simple-websocket

messagingjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueSimpleWebsocket

✓ import VueSimpleWebsocket from 'vue-simple-websocket'

✗ const { VueSimpleWebsocket } = require('vue-simple-websocket')

The package exports a default function, so named import or destructuring require is incorrect. Use default import.

$socketClient

✓ this.$socketClient.onMessage = (msg) => {}

✗ import { $socketClient } from 'vue-simple-websocket'

$socketClient is not an export; it's a global property injected by the plugin after calling app.use().

app.use

✓ app.use(VueSimpleWebsocket, url, options)

✗ Vue.use(VueSimpleWebsocket, url, options)

Vue.use() is for Vue 2.x; in Vue 3, use app.use(). The package expects the URL as second argument and optional options object.

Shows plugin installation with app.use, and component usage with event handlers and sendObj method.

// main.js import { createApp } from 'vue'; import App from './App.vue'; import VueSimpleWebsocket from 'vue-simple-websocket'; const app = createApp(App); app.use(VueSimpleWebsocket, 'wss://echo.websocket.org', { reconnectEnabled: true, reconnectInterval: 5000 }); app.mount('#app'); // Component.vue export default { name: 'MyComponent', created() { this.$socketClient.onOpen = () => console.log('connected'); this.$socketClient.onMessage = (msg) => console.log(JSON.parse(msg.data)); this.$socketClient.onClose = () => console.log('closed'); this.$socketClient.onError = () => console.log('error'); }, methods: { sendMessage() { this.$socketClient.sendObj({ type: 'greeting', text: 'Hello!' }); } } }

Debug

Known issues

breakingVue 2.x is supported via a separate branch/docs; Vue 3 is the default. Using Vue.use() for Vue 3 will cause an error.

fix

Use app.use() in Vue 3, or follow the Vue 2.x documentation.

affects: >=1.0.0

deprecatedThe package is in early development and not yet stable; API may change without major version bump.

fix

Pin to exact version and monitor releases.

affects: <1.0.0

gotchaEvent handlers set via assignment (onMessage = ...) will overwrite previous handlers. Only one handler per event.

fix

If you need multiple handlers, chain calls inside a single handler or use an event bus.

affects: *

gotchaThe package does not check if the WebSocket API is available (e.g., in environments without native WebSocket).

fix

Ensure the runtime supports the WebSocket API (browsers, Node.js 18+ with --experimental-websocket, or polyfill).

affects: *

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'onOpen')

$socketClient is not yet attached because the plugin was not installed correctly or the component uses it before mounting.

fix

Ensure app.use(VueSimpleWebsocket, ...) is called before mounting the app, and access $socketClient inside created/mounted hook.

TypeError: VueSimpleWebsocket is not a function

Using named import or require in a way that doesn't get the default export.

fix

Use default import: import VueSimpleWebsocket from 'vue-simple-websocket'

The plugin requires a URL as second argument. Received undefined.

Missing URL argument when calling app.use().

fix

Pass the WebSocket URL as second argument: app.use(VueSimpleWebsocket, 'wss://example.com')

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ramkumarshankar/vue-simple-websocket ↗

packagevue-simple-websocket ↗

homepagehttps://github.com/ramkumarshankar/vue-simple-websocket#readme ↗