Nuxt 3 Support

[harlan-zw]

Hi :wave: It looks like this module hasn't been updated for Nuxt 3. In an effort to improve the developer experience of modules, I've updated the module to clarify that it only supports Nuxt 2.

If Nuxt 3 support is added it will be moved to the https://github.com/nuxt-modules organisation.

@ricardogobbosouza Is Nuxt 3 support something you have planned? If not, perhaps we can archive this module?

Please let us know and thanks for your work!

[BilalSonmez]

Is there any solution to this issue?

Because we developed a project with Nuxt 3 and we are close to the end of the project. We need to use Laravel Echo.

import Echo from 'laravel-echo'

window.io = require('socket.io-client')

export default ({ app, env }) => {
  window.echo = new Echo({
    broadcaster: 'socket.io',
    host: `http://localhost:6001`,
  })
}

When I create a plugin in this way

Cannot set properties of undefined (setting 'io')

[harlan-zw]

The issue you have is that it's trying to server-side render the plugin but window can't exist in this context. You should name your plugin as laravel-echo.client.ts, this way it will only run on client-side.

I'd also move window.io = require('socket.io-client') inside the function

[BilalSonmez]

I tried it with the method you said. It worked, thank you very much.

However, using Laravel Reverb, I installed Pusher server on my own server.

Those who have problems like me can solve it this way.

//laravel-echo.client.ts
import Echo from 'laravel-echo'

import Pusher from 'pusher-js'

export default defineNuxtPlugin(() => {
  window.Pusher = Pusher
  window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    auth: {
      headers: {
        Authorization: `Bearer ${useCookie('accessToken').value}`,
        Accept: 'application/json',
      },
    },
  })
})