5 5
<a href="https://www.npmjs.com/package/vue-socket.io-extended"><img src="https://badgen.net/npm/v/vue-socket.io-extended" alt="Version"></a>
6 6
<a href="https://www.npmjs.com/package/vue-socket.io-extended"><img src="https://badgen.net/npm/dt/vue-socket.io-extended" alt="Downloads"></a>
7 7
<a href="https://www.npmjs.com/package/vue-socket.io-extended"><img src="https://badgen.net/npm/license/vue-socket.io-extended" alt="License"></a>
8 -
<a href="https://vuejs.org/"><img src="https://badgen.net/badge/Vue/2.x/orange" alt="Vue.js 2.x compatible"></a>
8 +
<a href="https://vuejs.org/"><img src="https://badgen.net/badge/Vue/3.x/orange" alt="Vue.js 3.x compatible"></a>
9 9
<a href="https://raw.githubusercontent.com/probil/vue-socket.io-extended/master/dist/vue-socket.io-ext.min.js"><img src="https://badgen.net/bundlephobia/min/vue-socket.io-extended" alt="Minified library size"></a>
10 10
<a href="https://codecov.io/gh/probil/vue-socket.io-extended"><img src="https://badgen.net/codecov/c/github/probil/vue-socket.io-extended/master" alt="Code coverage (codecov)"></a>
11 11
<a href="https://gitter.im/vue-socket-io-extended/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link"><img src="https://badgen.net/badge/chat/on%20gitter/cyan" alt="Join us Gitter"></a>
@@ -70,10 +70,12 @@ npm install vue-socket.io-extended socket.io-client
70 70
```js
71 71
import VueSocketIOExt from 'vue-socket.io-extended';
72 72
import { io } from 'socket.io-client';
73 +
import { createApp } from 'vue';
73 74 74 75
const socket = io('http://socketserver.com:1923');
75 76 76 -
Vue.use(VueSocketIOExt, socket);
77 +
const app = createApp({});
78 +
app.use(VueSocketIOExt, socket);
77 79
```
78 80
*Note:* you have to pass instance of `socket.io-client` as second argument to prevent library duplication. Read more [here](https://github.com/probil/vue-socket.io-extended/issues/19).
79 81
@@ -85,7 +87,8 @@ Vue.use(VueSocketIOExt, socket);
85 87
<script src="https://cdn.jsdelivr.net/npm/vue-socket.io-extended"></script>
86 88
<script>
87 89
var socket = io('http://socketserver.com:1923');
88 -
Vue.use(VueSocketIOExt, socket);
90 +
var app = createApp({});
91 +
app.use(VueSocketIOExt, socket);
89 92
</script>
90 93
```
91 94
@@ -96,7 +99,7 @@ Vue.use(VueSocketIOExt, socket);
96 99
Define your listeners under `sockets` section and they will listen corresponding `socket.io` events automatically.
97 100 98 101
```js
99 -
new Vue({
102 +
createApp({
100 103
sockets: {
101 104
connect() {
102 105
console.log('socket connected')
@@ -163,8 +166,9 @@ import { io } from 'socket.io-client';
163 166
import store from './store'
164 167 165 168
const socket = io('http://socketserver.com:1923');
169 +
const app = createApp({});
166 170 167 -
Vue.use(VueSocketIOExt, socket, { store });
171 +
app.use(VueSocketIOExt, socket, { store });
168 172
```
169 173 170 174
#### Receiving Events
@@ -188,15 +192,12 @@ Check the [Migration from VueSocketIO](#information_source-migration-from-vuesoc
188 192
```js
189 193
// In this example we have a socket.io server that sends message ID when it arrives
190 194
// so to get entire body of the message we need to make AJAX call the server
191 -
import Vue from 'vue'
192 -
import Vuex from 'vuex'
195 +
import { createStore } from 'vuex';
193 196 194 197
// `MessagesAPI.downloadMessageById` is an async function (goes to backend through REST Api and fetches all message data)
195 198
import MessagesAPI from './api/message'
196 199 197 -
Vue.use(Vuex);
198 - 199 -
export default new Vuex.Store({
200 +
export default createStore({
200 201
state: {
201 202
// we store messages as a dictionary for easier access and interaction
202 203
// @see https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5
@@ -237,10 +238,7 @@ Events can be sent to the Socket.IO server by calling `this._vm.$socket.client.e
237 238
Namespaced modules are supported out-of-the-box. Any appropriately-named mutation or action should work regardless of whether it's in a module or in the main Vuex store.
238 239 239 240
```js
240 -
import Vue from 'vue'
241 -
import Vuex from 'vuex'
242 - 243 -
Vue.use(Vuex);
241 +
import { createStore } from 'vuex';
244 242 245 243
const messages = {
246 244
state: {
@@ -269,7 +267,7 @@ const notifications = {
269 267
},
270 268
};
271 269 272 -
export default new Vuex.Store({
270 +
export default createStore({
273 271
modules: {
274 272
messages,
275 273
notifications,
@@ -296,11 +294,10 @@ Check the example below:
296 294
```vue
297 295
<!-- App.vue -->
298 296
<script>
299 -
import Vue from 'vue'
300 -
import Component from 'vue-class-component'
297 +
import { Options, Vue } from 'vue-class-component';
301 298
import { Socket } from 'vue-socket.io-extended'
302 299 303 -
@Component({})
300 +
@Options({})
304 301
export default class App extends Vue {
305 302
@Socket() // --> listens to the event by method name, e.g. `connect`
306 303
connect () {
@@ -416,7 +413,7 @@ const ioInstance = io('https://hostname/path', {
416 413
reconnectionDelay: 500,
417 414
maxReconnectionAttempts: Infinity
418 415
});
419 -
Vue.use(VueSocketIO, ioInstance, {
416 +
app.use(VueSocketIO, ioInstance, {
420 417
store, // vuex store instance
421 418
actionPrefix: 'SOCKET_', // keep prefix in uppercase
422 419
eventToActionTransformer: (actionName) => actionName // cancel camel case
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4