native websocket with vuex integration

Overview

vue-native-websocket · Build Status npm version

native websocket implementation for Vuejs 2 and Vuex

Install

yarn add vue-native-websocket

# or

npm install vue-native-websocket --save

Usage

Configuration

Automatic socket connection from an URL string

import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:9090')

Enable Vuex integration, where './store' is your local apps store:

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

Set sub-protocol, this is optional option and default is empty string.

import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:9090', { protocol: 'my-protocol' })

Optionally enable JSON message passing:

Vue.use(VueNativeSock, 'ws://localhost:9090', { format: 'json' })

JSON message passing with a store:

import store from './store'
Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store, format: 'json' })

Enable ws reconnect automatically:

Vue.use(VueNativeSock, 'ws://localhost:9090', {
  reconnection: true, // (Boolean) whether to reconnect automatically (false)
  reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
  reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
})

Manage connection manually:

Vue.use(VueNativeSock, 'ws://localhost:9090', {
  connectManually: true,
})
const vm = new Vue()
// Connect to the websocket target specified in the configuration
vm.$connect()
// Connect to an alternative websocket URL and Options e.g.
vm.$connect('ws://localhost:9090/alternative/connection/', { format: 'json' })
// do stuff with WebSockets
vm.$disconnect()

On Vuejs instance usage

var vm = new Vue({
  methods: {
    clickButton: function(val) {
        // $socket is [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) instance
        this.$socket.send('some data')
        // or with {format: 'json'} enabled
        this.$socket.sendObj({awesome: 'data'})
    }
  }
})

Dynamic socket event listeners

Create a new listener, for example:

this.$options.sockets.onmessage = (data) => console.log(data)

Remove existing listener

delete this.$options.sockets.onmessage

Vuex Store integration

Vuex integration works differently depending on if you've enabled a format

Without a format enabled

Socket events will commit mutations on the root store corresponding to the following events

SOCKET_ONOPEN

SOCKET_ONCLOSE

SOCKET_ONERROR

SOCKET_ONMESSAGE

Each callback is passed the raw websocket event object

Update state in the open, close and error callbacks. You can also check the socket state directly with the this.$socket object on the main Vue object.

Handle all the data in the SOCKET_ONMESSAGE mutation.

Reconect events will commit mutations SOCKET_RECONNECT and SOCKET_RECONNECT_ERROR.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    socket: {
      isConnected: false,
      message: '',
      reconnectError: false,
    }
  },
  mutations:{
    SOCKET_ONOPEN (state, event)  {
      Vue.prototype.$socket = event.currentTarget
      state.socket.isConnected = true
    },
    SOCKET_ONCLOSE (state, event)  {
      state.socket.isConnected = false
    },
    SOCKET_ONERROR (state, event)  {
      console.error(state, event)
    },
    // default handler called for all methods
    SOCKET_ONMESSAGE (state, message)  {
      state.socket.message = message
    },
    // mutations for reconnect methods
    SOCKET_RECONNECT(state, count) {
      console.info(state, count)
    },
    SOCKET_RECONNECT_ERROR(state) {
      state.socket.reconnectError = true;
    },
  },
  actions: {
    sendMessage: function(context, message) {
      .....
      Vue.prototype.$socket.send(message)
      .....
    }
  }
})
With custom mutation names
// mutation-types.js
const SOCKET_ONOPEN = '✅ Socket connected!'
const SOCKET_ONCLOSE = '❌ Socket disconnected!'
const SOCKET_ONERROR = '❌ Socket Error!!!'
const SOCKET_ONMESSAGE = 'Websocket message received'
const SOCKET_RECONNECT = 'Websocket reconnected'
const SOCKET_RECONNECT_ERROR = 'Websocket is having issues reconnecting..'

export {
  SOCKET_ONOPEN,
  SOCKET_ONCLOSE,
  SOCKET_ONERROR,
  SOCKET_ONMESSAGE,
  SOCKET_RECONNECT,
  SOCKET_RECONNECT_ERROR
}

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import {
  SOCKET_ONOPEN,
  SOCKET_ONCLOSE,
  SOCKET_ONERROR,
  SOCKET_ONMESSAGE,
  SOCKET_RECONNECT,
  SOCKET_RECONNECT_ERROR
} from './mutation-types'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    socket: {
      isConnected: false,
      message: '',
      reconnectError: false,
    }
  },
  mutations: {
    [SOCKET_ONOPEN](state, event)  {
      state.socket.isConnected = true
    },
    [SOCKET_ONCLOSE](state, event)  {
      state.socket.isConnected = false
    },
    [SOCKET_ONERROR](state, event)  {
      console.error(state, event)
    },
    // default handler called for all methods
    [SOCKET_ONMESSAGE](state, message)  {
      state.socket.message = message
    },
    // mutations for reconnect methods
    [SOCKET_RECONNECT](state, count) {
      console.info(state, count)
    },
    [SOCKET_RECONNECT_ERROR](state) {
      state.socket.reconnectError = true;
    }
  }
})

// index.js
import store from './store'
import {
  SOCKET_ONOPEN,
  SOCKET_ONCLOSE,
  SOCKET_ONERROR,
  SOCKET_ONMESSAGE,
  SOCKET_RECONNECT,
  SOCKET_RECONNECT_ERROR
} from './mutation-types'

const mutations = {
  SOCKET_ONOPEN,
  SOCKET_ONCLOSE,
  SOCKET_ONERROR,
  SOCKET_ONMESSAGE,
  SOCKET_RECONNECT,
  SOCKET_RECONNECT_ERROR
}

Vue.use(VueNativeSock, 'ws://localhost:9090', {
  store: store,
  mutations: mutations
})
With format: 'json' enabled

All data passed through the websocket is expected to be JSON.

Each message is JSON.parsed if there is a data (content) response.

If there is no data, the fallback SOCKET_ON* mutation is called with the original event data, as above.

If there is a .namespace on the data, the message is sent to this namespaced: true store (be sure to turn this on in the store module).

If there is a .mutation value in the response data, the corresponding mutation is called with the name SOCKET_[mutation value]

If there is an .action value in the response data ie. action: 'customerAdded', the corresponding action is called by name:

actions: {
    customerAdded (context) {
      console.log('action received: customerAdded')
    }
  }

Use the .sendObj({some: data}) method on the $socket object to send stringified json messages.

Custom socket event handling

Provide you own custom code to handle events received via the passToStoreHandler option. The function you provide will be passed the following arguments:

  1. event name
  2. event
  3. original/default handler code function function (eventName, event). This allows you to optionally do some basic preprocessing before handing the event over to the original handler.

The original passToStore code is used if no passToStoreHandler is configured.

Here is an example of passing in a custom handler. This has the original passToStore code to give you an example of what you can do:

Vue.use(VueNativeSock, 'ws://localhost:9090', {
  passToStoreHandler: function (eventName, event) {
    if (!eventName.startsWith('SOCKET_')) { return }
    let method = 'commit'
    let target = eventName.toUpperCase()
    let msg = event
    if (this.format === 'json' && event.data) {
      msg = JSON.parse(event.data)
      if (msg.mutation) {
        target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/')
      } else if (msg.action) {
        method = 'dispatch'
        target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/')
      }
    }
    this.store[method](target, msg)
  }
})

Here is an example of do some preprocessing, then pass the event onto the original handler code:

Vue.use(VueNativeSock, 'ws://localhost:9090', {
  passToStoreHandler: function (eventName, event, next) {
    event.data = event.should_have_been_named_data
    next(eventName, event)
  }
})

Examples

TODO: post your example here!

Credits

Derived from https://github.com/MetinSeylan/Vue-Socket.io

Comments
  • After reconnected websocket, this.$socket.send , can not send message,

    After reconnected websocket, this.$socket.send , can not send message,

    After reconnected websocket, this.$socket.send , can not send message, chrome console Error message :"WebSocket is already in CLOSING or CLOSED state" 。in other words , the "socket Instance" in vuex's state is not updated. still the previous one.

    opened by qq476649388 10
  • Changing websocket url

    Changing websocket url

    How do I change the websocket url string? The component needs to connect to a different websocket url depending on the current url.

    Here is an example of my component:

    <script>
    import VueNativeSock from 'vue-native-websocket'
    Vue.use(VueNativeSock, 'ws://myserver:8080/logs?id=' + this.$route.params.id);
    
    export default {
    ...
    }
    </script>
    

    So if the current url is http://example/results/1234, then I need to open the connection to ws://myserver:8080/logs?id=1234.

    opened by DenizTC 9
  • How to disconnect properly?

    How to disconnect properly?

    Can someone please point me to the proper way to disconnect - I suppose $socket.close() should be used. But if reconnect is enabled - how to disable it. Thank you.

    opened by wr200m 6
  • [Feature Request] Ability to close/open a connection manually when the

    [Feature Request] Ability to close/open a connection manually when the "reconnection" option is true

    Hello,

    I'm currently utilizing the "reconnection" option. however, sometimes, I need to close the connection gracefully from the server side and don't want it to reconnect till I says so.

    To me, the most obvious thing to do would be to expose the "Observer" instance from the "observer.WebSocket" instance, but I'm not much of a js dev though. sorry if I missed something obvious.

    Thanks.

    opened by himalr 5
  • Improvement: Allow user to manually connect and disconnect

    Improvement: Allow user to manually connect and disconnect

    This improvement solves a common use case and resolves #41. By adding a connectManually property to the config object, the user can manually connect and disconnect the WebSocket via the $connect and $disconnect functions. If no property is added the config, functionality is left unchanged (plugin automatically connects when installed).

    Please note: this PR might make #46 unnecessary.

    opened by NaughtyMC 5
  • Use namespace also for actions

    Use namespace also for actions

    I do not know wether this is desired behavior, but i use namespaced stores und vue-native-websocket is not able to call actions accordingly.

    It is because you do not include the namespace when generating the action: if (msg.mutation) { target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/') } else if (msg.action) { method = 'dispatch' target = msg.action }

    In my opinion this is a bug and i could create a pull-request if you want to?

    opened by ThomasKlessen 5
  • Optional custom 'passToStore' code

    Optional custom 'passToStore' code

    Via the passToStoreHandler configuration option, you can provide a replacement or additional logic for the passToStore code in src/Observer.js.

    The function you provide will be passed the following arguments:

    1. event name
    2. event
    3. original/default handler code function function (eventName, event). This allows you to optionally do some basic preprocessing before handing the event over to the original handler.

    The original passToStore code is used if no passToStoreHandler is configured.

    I've added new documentation describing this in more detail in README.md.

    The one addition I'm not sure about is giving the custom passToStoreHandler function the this of the src/Observer.js by passing it in as an argument, or doing a .bind(this). Let me know if you think is something that should be added.

    opened by joshuamorris3 4
  • Proxy is not defined - IE 11

    Proxy is not defined - IE 11

    Hello,

    In Main.js file you use Proxy object and it's causes that my app not work in IE 11, because in IE 11 there is no Proxy object.

    How can I resolve it? Maybe some Polyfill?

    opened by dariuszjastrzebski 4
  • Fix observer mutation name when format: json is used

    Fix observer mutation name when format: json is used

    Hello Nathan,

    Thanks for your lib, I really appreciate your work.

    Hovewer I ran into an issue when I use format: json option. Indeed, according to the documentation: "If there is a .mutation value in the response data, the corresponding mutation is called with the name SOCKET_[mutation value]"

    However when event data does not contains .mutation value mutation is null, so the mutation is not find in the store.

    The behavior I expect is when .mutation value is not included in the data sent from the server, then I kept the original mutation methods.

    What do you think?

    opened by nmeylan 4
  • Separate on open event handling for each vue component

    Separate on open event handling for each vue component

    I want to separate onopen events for each vue component. Now I see alerts with 1 and 2 two times. Is there a way to avoid this duplication?

    Vue.use(VueNativeSock.default, wsPath, {
      reconnection: true,
      reconnectionAttempts: 5,
      reconnectionDelay: 3000,
      format: 'json',
    });
    
    var app1 = new Vue({
      created: function () {
        var vm = this;
        this.$options.sockets.onmessage = function (message) {
          vm.listen(message);
        };
        this.$options.sockets.onopen = function () {
          alert(1);
        }
      }
    });
    
    var app1 = new Vue({
      created: function () {
        var vm = this;
        this.$options.sockets.onmessage = function (message) {
          vm.listen(message);
        };
        this.$options.sockets.onopen = function () {
          alert(2);
        }
      }
    });
    
    opened by danmash 2
  • add support for custom mutation name

    add support for custom mutation name

    const mutationTypes = {
        LOGIN_PENDING: '🔒 Login Pending',
        LOGIN_SUCCESS: '🔒 ✅ Login Successful',
        LOGIN_FAILED: '🔒 ❌ Login Failed',
        LOGOUT: '🔒 Logout',
        REFRESH_TOKEN: '🔒 Refresh Token',
        REMOVE_AUTH_ERROR: '🔒 Remove Auth Error',
        ADD_CONFIG: '⚙️ Global config added to store',
        ADD_SHOW: '📺 Show added to store'
    };
    

    For example in an app I work on we have mutation names like this. It'd be nice to see the websocket ones displayed in the same way. This would also allow users to just hook up the websocket events to mutations they're already using.

    opened by OmgImAlexis 2
  • Bump json5 from 1.0.1 to 1.0.2

    Bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump engine.io from 6.2.0 to 6.2.1

    Bump engine.io from 6.2.0 to 6.2.1

    Bumps engine.io from 6.2.0 to 6.2.1.

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)
    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)
    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Using Pinia instead of Vuex

    Using Pinia instead of Vuex

    Is there an option to use vue-native-websocket with Pinia instead of Vuex? I am currently migrate an project from Vuex to Pinia and try to update my Websocket store.

    opened by stritti 2
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • missing declaration file for module

    missing declaration file for module

    Hi there, i'm trying use this on a Vue3 app and i keep getting this : "Could not find a declaration file for module 'vue-native-websocket'. '/node_modules/vue-native-websocket/dist/build.js' implicitly has an 'any' type. Try npm i --save-dev @types/vue-native-websocket if it exists or add a new declaration (.d.ts) file containing declare module 'vue-native-websocket';ts(7016).

    the @types/vue-native-websocket package does not exist on registry.yarnpkg.com, am i doing something wrong ?

    opened by josefernandezatceiba 1
Releases(v2.0.14)
Owner
Nathan
Nathan
💬 Realtime Chat application made with Vue 3, Fastify and WebSocket.

?? Chatify Full stack Realtime Chat Application made with Vue 3, Fastify and WebSocket. Preview Frontend Stack: Vue 3 & Composition API Bootstrap Vite

Aykut 83 Dec 16, 2022
Vue integration for the Laravel Echo library.

vue-echo Vue 2 integration for the Laravel Echo library. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for

Kerstens Maxim 231 Nov 10, 2022
😻 Socket.io implementation for Vuejs and Vuex

Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements Demo Chat Application

Metin Seylan 3.9k Jan 5, 2023
:v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)

Vue-Socket.io-Extended Socket.io bindings for Vue.js 2 and Vuex (inspired by Vue-Socket.io) ⚠️ The alpha version of v5 (with Vue 3 support) has been r

Max Lyashuk 629 Jan 4, 2023
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Dec 28, 2022
TMM is a Linux native game modding tool. it allows to install and depoly mods for Linux native and wine games.

TMM is a Linux native mod manager made with the Tauri toolkit, it can, install, load, remove, and deploy mods for both linux native and wine games.

Mathiew May 119 Jan 2, 2023
Simple websocket (socket.io) plugin for Vue.js

vue-websocket A socket.io plugin for Vue.js. This package does not support native websockets. At the time, we recommend using vue-native-websocket or

Icebob 532 Dec 17, 2022
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
💬 Realtime Chat application made with Vue 3, Fastify and WebSocket.

?? Chatify Full stack Realtime Chat Application made with Vue 3, Fastify and WebSocket. Preview Frontend Stack: Vue 3 & Composition API Bootstrap Vite

Aykut 83 Dec 16, 2022
A websocket based remote event system

vue-remote A websocket based remote event system for Vue.js. Works with Vue 2.0, untested with Vue 1.0. Installation 1.) Install package via NPM npm i

Justin MacArthur 22 Oct 22, 2022
Payment-integration - A simple payment integration with m-pesa payment gateway built with express

mpesav2 Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch s

Kihika Samuel 0 Jan 3, 2022
Lightweight vuex inspired centralized state management library for all kinds of javascript applications. Great for React Native.

Verx Lightweight vuex inspired centralized state management library for all kinds of javascript applications. install npm install --save verx # yarn a

Jaynti Kanani 3 Nov 4, 2019
🤓 This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Features MySQL integration, user authentication, CRUD note actions, and Vuex store modules.

Koa-Vue-Notes-Web This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Frontend Vue GitHu

John Datserakis 198 Sep 19, 2022
:chart_with_upwards_trend: Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind

vuex-feature-scoped-structure by igeligel A Vue.js/Vuex project showcasing a complex but scalable store structure. This project was created in coopera

Kevin Peters 225 Oct 14, 2022
Native mobile applications using Vue and NativeScript.

Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Al

NativeScript-Vue 5k Jan 9, 2023
A HashiCorp Vault UI written with VueJS and Vault native Go API

Goldfish Vault UI - Live Demo Share this repo with your colleagues! What is this? Goldfish - A HashiCorp Vault UI and workflow tool. pic.twitter.com/u

Tony Cai 2.2k Dec 18, 2022
Laqu-l 130 Dec 27, 2022
Native desktop applications using Vue.js.

Vuido Create native desktop applications for Windows, OS X and Linux using Vue.js. Introduction Vuido is a framework for creating native desktop appli

Michał Męciński 6.1k Jan 5, 2023
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.7k Jan 6, 2023
🏄🏼 A SmoothPicker for Vue 2 (like native datetime picker of iOS)

vue-smooth-picker ???? A SmoothPicker for Vue 2 Let's more easily select some data on the touch screen device, such as time / city / gender / seat num

Salam Hiyali 214 Jan 6, 2023