Laravel Echo With Nuxt 3

laravel-echo-nuxt3.md

How to use Laravel Echo in Nuxt 3 consuming RESTful API

Laravel as backend in server and Nuxt 3 in frontend

Assuming that Laravel Websockets has been already set up in backend.

Laravel Echo has everything you need for a separate Nuxt 3 front-end application. Let’s install the package with pusher js.

npm i laravel-echo pusher-js

Plugins

Create plugin and save in plugins directory as echo.client.js

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
 
window.Pusher = Pusher
const token = useCookie('token')

export default defineNuxtPlugin(nuxtApp => {
    const echo = new Echo({
      broadcaster: 'pusher',
      key: 'same-key-as-server',
      wsHost: '127.0.0.1', // update according to backend server url
      authEndpoint: 'http://127.0.0.1/api/broadcasting/auth', // backend broadcasting auth url
      cluster: 'ap3',
      wsPort: 6001, // websocket port in server
      forceTLS: false,
      disableStats: true,
      auth: {
        headers: {
          authorization: 'Bearer ' + token.value,
        }
      }
  })
  
  return {
    provide: {
      echo
    }
  }
})

Usages

const { $echo } = useNuxtApp();

onMounted(() => {
  $echo.join('chat')
    .here()
    .joining()
    .leaving()
    .listen();
})