Registry / messaging / vue-native-websocket

vue-native-websocket

library2.0.15jsnpmunverified

Vue.js 2 plugin that provides native WebSocket integration, with optional Vuex store support for reactive state management. Latest version 2.0.15, stable but in maintenance mode (last release 2020). Key differentiator: simple API using Vue.use() with automatic reconnection, JSON formatting, and Vuex mutation-based event handling. Compared to alternatives like vue-socket.io, this uses native WebSocket (no Socket.IO dependency) and is lighter, but lacks modern features like ESM exports or Vue 3 support.

messaging

npm install vue-native-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-NATIVE-WEBSOCK

vue-native-websocket

messagingjavascriptv2.0.15

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.

VueNativeSock

✓ import VueNativeSock from 'vue-native-websocket'

✗ const VueNativeSock = require('vue-native-websocket').default

Package exports a CommonJS default export; ESM import works as shown. No named exports.

Vue.use(VueNativeSock, ...)

✓ Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store })

✗ new VueNativeSock(...)

Must be called as a plugin via Vue.use(), not instantiated directly.

this.$socket

✓ this.$socket.send('message')

✗ this.$socket.emit('message')

WebSocket instance exposed on Vue instance; use native WebSocket methods, not Socket.IO-style emit.

Shows how to install the plugin with Vuex store integration, JSON formatting, auto-reconnection, and a send method.

import Vue from 'vue' import VueNativeSock from 'vue-native-websocket' import store from './store' Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store, format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000 }) new Vue({ el: '#app', store, methods: { sendMessage() { this.$socket.sendObj({ message: 'hello' }) } } })

Debug

Known issues

breakingVue 2 only: This plugin does not support Vue 3 and using it with Vue 3 will cause errors.

fix

Use an alternative like vue-native-websocket-vue3 or upgrade to a Vue 3 compatible plugin.

affects: >=0.0.0

gotchaVuex mutations must be named SOCKET_ONOPEN, SOCKET_ONCLOSE, SOCKET_ONERROR, SOCKET_ONMESSAGE exactly. Typos cause silent failures.

fix

Ensure mutation names match exactly: SOCKET_ONOPEN, SOCKET_ONCLOSE, SOCKET_ONERROR, SOCKET_ONMESSAGE.

affects: >=2.0.0

deprecatedPackage is in maintenance mode with no releases since 2020. Not recommended for new projects.

fix

Consider using vue-native-websocket-vue3 or a modern alternative like vue-socket.io-extended.

affects: >=2.0.0

gotchaWhen using connectManually: true, you must call vm.$connect() before the WebSocket connection is established; otherwise $socket is undefined.

fix

Call this.$connect() (or vm.$connect()) explicitly after Vue.use().

affects: >=2.0.0

gotchaWithout format: 'json', the SOCKET_ONMESSAGE mutation receives a raw Event object, not the message data. Common mistake: expecting parsed data.

fix

Use format: 'json' in options, or access event.data in the mutation.

affects: >=2.0.0

Errors

Common errors & fixes

Vue.use is not a function

Importing the plugin incorrectly, e.g., using default import when CommonJS require is used without .default.

fix

Use 'const VueNativeSock = require('vue-native-websocket').default' OR use ES import syntax.

Cannot read property 'send' of undefined

WebSocket not connected yet or connectManually not called.

fix

Ensure $connect() is called (if connectManually: true) or wait for SOCKET_ONOPEN mutation.

Unknown mutation type: SOCKET_ONMESSAGE

Mutation name mismatch or not registered in Vuex store.

fix

Verify mutation name is exactly 'SOCKET_ONMESSAGE' in the store.

Upgrade

Version history

2.0.15latest on npm

Audit

Dependencies

vuerequiredpeer dependency, requires Vue 2.x

vuexoptionaloptional peer dependency for store integration

Agent activity

29 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nathantsoi/vue-native-websocket ↗

packagevue-native-websocket ↗

homepagehttps://github.com/nathantsoi/vue-native-websocket#readme ↗