Migrating from Vue 2 to Vue 3, you might want to start using Composition API.
If you want to use socket.io you can search 'vue 3 socket.io' and find vue-3-socket.io
. You will see following in it's readme:
this.sockets.subscribe('EVENT_NAME', (data) => {
this.msg = data.message;
});
But Vue 3 Composition API is about to use setup()
or <script setup>
and there's no this
.
So you have to use socket.io directly, without Vue plugin:
socket.io.js
export const useSocketIO = () => {
const socket = io('ws://localhost:3000')
return {
socket,
}
}
MyComponent.vue
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const { socket } = useSocketIO()
socket.on('welcome', () => { console.log('welcome') })
}
})
</script>
But why not just export socket
from socket.io.js
and import it in a component? If I do that, I can emit events but cannot subscribe on them. Maybe it's because I use Quasar 2 with SSR mode.
Top comments (1)
You are not obliged to use the Composition API, you can also use the Options API with Vue3. Otherwise, yeah making a homemade vanilla solution is still the best way to go IMO.
Related SO question: stackoverflow.com/q/71466297/8816585