Registry / messaging / vue-native-websocket-vue3

vue-native-websocket-vue3

library3.1.8jsnpmunverified

A WebSocket plugin for Vue 3 with optional Vuex or Pinia integration. Current stable version is 3.1.8. It provides out-of-the-box support for connecting to a WebSocket server, handling events (onopen, onclose, onerror, onmessage, reconnect, reconnect_error), and integrates with Vuex or Pinia for state management. Differentiators include built-in heartbeat mechanism to prevent connection drops, customizable mutation/action names for store integration, and TypeScript support. Released relatively stable with infrequent updates.

messaging

npm install vue-native-websocket-vue3

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-NATIVE-WEBSOCK

vue-native-websocket-vue3

messagingjavascriptv3.1.8

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-vue3'

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

ESM default export only; CommonJS require will fail in Node.js contexts.

VueNativeSock

✓ app.use(VueNativeSock, 'ws://localhost:8080', { store })

✗ Vue.use(VueNativeSock)

Vue 3 uses app.use(), not Vue.use(). Plugin must be installed after createApp.

useWebSocket

✓ import { useWebSocket } from 'vue-native-websocket-vue3'

✗ import useWebSocket from 'vue-native-websocket-vue3'

Available since v3; named export for composition API usage.

Shows how to install and configure the plugin in a Vue 3 app with optional Pinia integration, reconnection and JSON formatting.

import { createApp } from 'vue' import VueNativeSock from 'vue-native-websocket-vue3' const app = createApp({}) // Optional: integrate with Pinia import { createPinia } from 'pinia' const pinia = createPinia() app.use(pinia) app.use(VueNativeSock, 'wss://your-server.com/ws', { store: pinia, // Pass Pinia instance if using Pinia; omit if using Vuex format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000 }) app.mount('#app')

Debug

Known issues

breakingVersion 3.x is for Vue 3 only; will not work with Vue 2.

fix

Use vue-native-websocket (v2) for Vue 2 projects.

affects: >=3.0.0

deprecatedVuex integration pattern with SOCKET_* mutation names is the legacy approach; Pinia is preferred for new projects.

fix

Consider using Pinia with custom action names instead of Vuex mutations.

affects: >=3.0.0

gotchaThe plugin requires a WebSocket URL as the second argument; empty string will cause connection errors.

fix

Provide a valid WebSocket URL.

affects: >=3.0.0

gotchaIf using Vuex, the store must be passed in the options object; simply importing it without setting store will not integrate.

fix

Set store: store in the plugin options.

affects: >=3.0.0

gotchaTypeScript types are shipped, but the plugin does not export types for the store integration; you may need to declare custom module augmentation.

fix

See README for type declaration examples.

affects: >=3.0.0

deprecatedThe `sendObj` method on $socket is used in examples but not guaranteed in future versions; prefer sending plain JSON strings.

fix

Use JSON.stringify and send directly.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: VueNativeSock is not a function

Using require() in ESM context or incorrect import style.

fix

Use `import VueNativeSock from 'vue-native-websocket-vue3'` instead of require.

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

Using Vue.use() in Vue 3; factory pattern changed.

fix

Use `app.use(VueNativeSock, url, options)` after `const app = createApp(...)`.

WebSocket connection to 'ws://' failed:

Empty or invalid WebSocket URL passed as second argument.

fix

Provide a valid WebSocket URL like 'wss://example.com/ws'.

Error: [vue-native-websocket] Vuex store is required for mutations integration.

Using Vuex mutations without passing store in options.

fix

Pass store: store in the third argument options object.

TypeError: Cannot read properties of undefined (reading 'config')

Accessing main.config.globalProperties before Vue app is mounted.

fix

Ensure store mutations do not rely on globalProperties until app is mounted; use alternative state references.

Upgrade

Version history

3.1.8latest on npm

Audit

Dependencies

vuerequiredPeer dependency; required to use the plugin

core-jsrequiredPeer dependency for polyfills

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/likaia/vue-native-websocket-vue3 ↗

packagevue-native-websocket-vue3 ↗

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