Getting Started

Installation

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

Quick Start

You can use the following command to install the module and automatically register it in your nuxt.config.ts modules section

Terminal
npx nuxi@latest module add nuxt-laravel-echo

or manually install a dependency via:

Terminal
pnpm add nuxt-laravel-echo

and register the module in your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    // other modules
    'nuxt-laravel-echo'
  ],

  echo: {},
})

Configuration

Once you have the module installed and registered, provide the configuration in nuxt.config.ts according to your setup.

See more details here - Laravel Broadcasting Client Setup.
nuxt.config.ts
export default defineNuxtConfig({
  //... other parts of the config

  echo: {
    key: 'REPLACE_ME', // Your Laravel Echo app key
    authentication: {
      baseUrl: 'laravel.test', // Your Laravel app URL
    },
  },
})

That's it! You can now use Nuxt Auth Sanctum in your Nuxt app ✨

Dev server

If you experience issues during the dev server run (pnpm run dev), you should enable compatibility mode for the Pusher library by adding Vite configuration in your nuxt.config.ts like this:

nuxt.config.ts
export default defineNuxtConfig({
  // ... other parts of the config

  vite: {
    optimizeDeps: {
      include: ['nuxt-laravel-echo > pusher-js'], // or ['pusher-js'] for older Vite versions
    },
  },
})