Usage

Configuration

Detailed description of available module options.

Default configuration

By default, the module uses the following configuration values that you can adjust:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-laravel-echo'],

  echo: {
    broadcaster: 'reverb', // available: reverb, pusher
    host: 'localhost',
    port: 8080,
    scheme: 'https', // available: http, https
    transports: ['ws', 'wss'],
    authentication: {
      mode: 'cookie',
      baseUrl: 'http://localhost:80',
      authEndpoint: '/broadcasting/auth',
      csrfEndpoint: '/sanctum/csrf-cookie',
      csrfCookie: 'XSRF-TOKEN',
      csrfHeader: 'X-XSRF-TOKEN',
    },
    logLevel: 3,
    properties: undefined,
  },
})

If you don't specify any value in your nuxt.config.ts, then the default config will be used on plugin initialization.

Overrides

Module configuration is exposed to runtimeConfig property of your Nuxt app, so you can override either in echo module config or runtimeConfig.public.echo property.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-laravel-echo'],
  
  echo: {
    key: 'MY_APP_KEY',
  },

  runtimeConfig: {
    public: {
      echo: {
        logLevel: 3,
      },
    },
  },
})

Environment variables

It is possible to override options via environment variables too. It might be useful when you want to use .env file to provide key for the broadcast backend.

And here is what it will look like in .env file:

.env

NUXT_PUBLIC_ECHO_KEY='REPLACE_ME'

Available options

For any additional configurations, you can adjust the next list of available parameters:

Parameter	Description	Default
key	The Laravel Broadcasting app key for a secure connection.	`undefined`
broadcaster	The Laravel broadcaster type to use. Use reverb or pusher.	`reverb`
host	The host to connect to WebSocket.	`localhost`
port	The port to connect to WebSocket.	`8080`
scheme	The scheme to use for the connection. Use http or https.	`https`
cluster	The application cluster to connect to.	`undefined`
transports	The transports to enable for the connection.	`['ws', 'wss']`
authentication	Authentication options for Private and Presence channels.	`object`
authentication.mode	Authentication mode cookie or token	`cookie`
authentication.baseUrl	The base URL of Laravel application.	`http://localhost:80`
authentication.authEndpoint	The endpoint used for channels authentication.	`/broadcasting/auth`
authentication.csrfEndpoint	The endpoint used for CSRF token retrieval.	`/sanctum/csrf-cookie`
authentication.csrfCookie	The name of the CSRF cookie.	`XSRF-TOKEN`
authentication.csrfHeader	The name of the CSRF header.	`X-XSRF-TOKEN`
logLevel	The log level to use for the logger.	`3`
properties	Additional properties to extend the Echo instance options. See Additional properties section.	`undefined`

Additional properties

When you are using the Pusher backend, you may need to assign additional properties to your Echo instance object such as:

enableStats
activityTimeout
etc

For these, you can override echo.properties parameter to pass all the details that are not included in the default config:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-laravel-echo'],

  echo: {
    key: 'REPLACE_ME',
    properties: {
      customField: 'customValue',
    },
  },
})

Installation

How to add nuxt-laravel-echo to your Nuxt application!

Cookie authentication

How to setup Sanctum cookie-based authentication for Laravel Echo.