vue-socket.io-extended: Vue 3 support (prev. 'Error in initialisation with Vue3 createApp')

Initialization with instructions of doc from Vue3 as follow

import { createApp } from "vue";
import App from "./App.vue";

import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";

const app = createApp(App);

const socket = io("http://socketserver.com:1923");

app.use(VueSocketIOExt, socket);

app.mount("#app");

Getting errors in runtime Uncaught TypeError: e is not a constructor

After some research, seems the problem is from the breaking change from Vue2 to Vue3, with the createApp api

https://nystudio107.com/blog/a-taste-of-vue-js-3-async-components-and-plugins/amp https://alvarosaburido.dev/blog/how-to-migrate-your-library-from-vue2-to-vue3

Is there any timeline to cope with Vue3 updates?

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 7
  • Comments: 40 (24 by maintainers)

Most upvoted comments

Hi, when can we expect support for Vue 3? I’m starting a new project and wanted to do it with the newest version of vue. Is there any option to release it at least in beta version?

I’ve spend some time today to create an example of alpha working with Vue 3 (Options API): https://codesandbox.io/s/vue-socket-io-extended-v5-vue-3-options-api-skhrn

Usage of decorator syntax is coming soon, should help to fix potential issues, e.g. #528

@DblK No. I haven’t tested importing this new path in TS. Will take a look. Thanks for reporting

Hi @jessepcc and thanks for your issue. I haven’t used the library with Vue 3 yet. Neet to take a closer look at new API. Since Vue 3 has been released recently I believe it’s time to work on Vue 3 compatible version of the library

Just published a new version with the decorator exported in a separate entry point. Library size went back to 6k (minified)

Installation is still with npm i vue-socket.io-extended@alpha

Need to hear some feedback to make sure it works for both common usage and decorator usage. Some set of tests would probably be better but it would take more time.

I’ve just published alpha version of the library with Vue 3 support in alpha channel.

@jnt0r could you check how it work for you? Unfortunately my project at work doesn’t use socket.io at all

For some reason library has grown considerably after migration:

Now: 12kb
Before: 7kb

In original MR it was even larger, 25kb due to part of the vue compiled into the library. So I made it external but there is something more. I suspect vue-class-component 🤔

BTW Nuxt.js and Quasar are not supporting vue 3 just yet so we shouldn’t worry about them

Thanks guys will try to tackle this during the holiday

I’ve made a pull request containing a (definitely not production ready) migration to vue 3. https://github.com/probil/vue-socket.io-extended/pull/499

Okay, I understand that. Had some hard time figuring out this types thing with the submodules. But got it working => PR is opened. So no need to use Babel or anything else for that.

Hopefully, I can assist at full TS rewrite 😃 Just ping me if you decided to start.

Just tried this using Vue3 + Ts + CompositionApi and everything seems to be working! ❤️ Thank you very much!

@probil Nice 👍🏽 I just tested it with my curreent project and it works for me. Did not test all features but basic features work.

I don’t know why it’s getting that big … I haven’t read into how you build the plugin. Maybe I catch something up than I will let you know.

I gave this a try too. #507 My version maybe still need some work but it’s working for me at the moment.

Oh sorry @jnt0r I messed you up with another guy (@e-tobi) who has created PR with the idea of useSocket(). You guys have almost the same avatar 😃

I’ll update my project either later today or this week aswell to test this👍

@matrunchyk The migration is not hard, I’m just struggle to find enough time to deal with it. BTW in 2020 you don’t have to use socket.io anymore since plain websockets are well supported in browsers. https://caniuse.com/websockets The only reasons to use it are convenient API and support for super old browser.

I’ll try to migrate it to Vue 3 later this year but can’t guarantee you anything.