Nuxt composition API (stable state)

in composition-api there is no this, instead in the setup function we can get the closest to this object from context.app javascript const { app: { $axios, $cookies, $nuxtSocket, store } } = context one of the issues is that $store has been renamed to store inside app, so to solve this we bind the $nuxtSocket like so:

onMounted(() => {
      const boundNuxtSocket = $nuxtSocket.bind({ ...app, $store: store })
      socket.value = boundNuxtSocket({
        // nuxt-socket-io opts:
        name: 'main',

        // socket.io-client opts:
        reconnection: true,
      })
    })

still after doing all that we get errors:

Looking into that it seems these are the lines in question:

teardown({ ctx, socket, useSocket }) {
    if (ctx.onComponentDestroy === undefined) {
      ctx.onComponentDestroy = ctx.$destroy
    }

    ctx.$on('closeSockets', function() {
      socket.removeAllListeners()
      socket.close()
    })

ctx is seemed to be this meaning our app when looking what calls teardown:

if (teardown) {
    register.teardown({
      ctx: this,
      socket,
      useSocket
    })
  }

and this is what’s inside of app or this for $nuxtSocket:

current workaround is to pass to the $nuxtSocket options: teardown: false but then we miss out on that and need to implement teardown functionality ourselves.

so I’m not sure who/what is supposed to add $on to this object but that doesn’t happen.

please help

[richardeschloss]

Branch feat/composition-api has just been pushed with some basic fixes:

• implementation for $on, and $emit were created with tiny-emitter/instance (tiny-emitter added as a dependency)
• implementation for $destroy added (requires onUnmounted to be passed in now as an option to nuxtSocket)
• namespace config assignResp work for RefImpl types. (i.e., ref()'s, reactive())
• stubbed ctx.$set in the plugin, ctx.$watch in the example component

The working component is components/Composition1.vue

Be careful trying to make the socket instance itself reactive because of it’s circular JSON structure.

The main file changed was io/plugin.js. Let me know how far these changes get you.

[richardeschloss]

1.1.17 released with basic support. Usage will have the details, and a fully working example is in Composition1.vue