Problem in a component with nuxt

[frederic117]

Hello,
Thanks for your help
when i call the socket from default page everything work
but inside a component I got:

TypeError: this.$socket.$subscribe is not a function

and if i console log the socket in the component i have:

this.$socket 
{client: Socket}
client: Socket {io: Manager, nsp: "/", json: Socket, ids: 0, acks: {…}, …}
connected: (...)
disconnected: (...)
get connected: ƒ ()
get disconnected: ƒ ()
__proto__: Object

And from default:

this.$socket 
{client: Socket, $subscribe: ƒ, $unsubscribe: ƒ}
client: Socket {io: Manager, nsp: "/", json: Socket, ids: 0, acks: {…}, …}
connected: (...)
disconnected: (...)
get connected: ƒ ()
get disconnected: ƒ ()
__proto__: Object

I don't know what to do to get the function of the socket available !

[capndave]

@frederic117 I can't replicate what you're seeing - the this.$socket objects in index.vue and components/Logo.vue are identical in my case. I used create-nuxt-app. Can you post your component code?

[frederic117]

thanks for your reply.
I made it works with vue-socket
But the call of the socket was exactly the same in the default as it was in the component

[probil]

Hi @frederic117 👋
Thanks for your issue.

It's hard to figure out the issue without knowing how to reproduce it.
It would be really cool if you can provide us a super simple demo of the issue (for example as github repo).
There multiple places where a problem can be. It can take you 10 minutes to create a simple demo but for someone we can save hours for debugging

[FilipeCovas]

@probil Same here, when i put this.$socket.$subscribe inside a component on nuxt returns an error: this.$socket.$subscribe is not a function :/

Code on mounted lifecycle function:

Console Error:

console.log() showing differences between page and component:

[probil]

Hi, @FilipeCovas
Where do you call this.$socket.$subscribe ? Is it in mounted hook or in other place? Could you provide a bit more context?

Which version of the library do you use?

[FilipeCovas]

@probil Yes is it in mounted lifecycle function from component. But for now i decided write on parent page and works for me and for my feature. If get a solution to this issue it will help a lot of people.

• vue-socket.io-extended -> 4.0.1
• socket.io-client -> 2.3.0
• nuxt -> 2.0.0