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: {
      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.

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:

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',
    },
  },
})

Last updated