Nuxt Laravel Echo

https://manchenkoff.gitbook.io/nuxt-laravel-echo
Admin
A Nuxt module for integrating Laravel Echo, providing seamless application broadcasting with...
Tokens:1,891
Snippets:12
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Nuxt Laravel Echo Module

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/getting-started/installation

Command to install the nuxt-laravel-echo module and automatically register it in the nuxt.config.ts modules section. This is the initial step for integrating Laravel Echo into a Nuxt application.

```bash
npx nuxi@latest module add nuxt-laravel-echo
```

--------------------------------

### Nuxt Laravel Echo Configuration

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/getting-started/installation

Basic configuration for the Nuxt Laravel Echo module in `nuxt.config.ts`. Requires setting an application key and authentication base URL pointing to your Laravel application. This configuration is essential for Echo to connect to your Laravel backend.

```typescript
export default defineNuxtConfig({
  //...

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

--------------------------------

### Nuxt Vite Configuration for Pusher Compatibility

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/getting-started/installation

Vite configuration in `nuxt.config.ts` to enable compatibility mode for the Pusher library during development. This is a troubleshooting step for potential issues when running the dev-server and ensures Pusher.js can be properly optimized.

```typescript
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['pusher-js'], // or ['nuxt-laravel-echo > pusher-js'] for newer Vite versions
    },
  },
})
```

--------------------------------

### TokenStorage Interface Definition (TypeScript)

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/other/token-storage

Defines the interface for token storage handlers in Nuxt Laravel Echo. It includes methods for getting and setting authentication tokens, accepting the NuxtApp instance as a parameter for context.

```typescript
/**
 * Handlers to work with authentication tokens.
 */
export interface TokenStorage {
    /**
     * Function to load a token from the storage.
     */
    get: (app: NuxtApp) => Promise<string | undefined>;
    /**
     * Function to save a token to the storage.
     */
    set: (app: NuxtApp, token?: string) => Promise<void>;
}
```

--------------------------------

### Access Echo App Configuration with useEchoAppConfig

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/composables/useechoappconfig

Demonstrates how to use the useEchoAppConfig composable to access and utilize Laravel Echo's application configuration. This example shows retrieving the configuration and setting an authentication token in storage. It's primarily for internal module usage.

```typescript
const echoAppConfig = useEchoAppConfig()

// sets the Bearer token value to the storage
echoConfig.tokenStorage.set('auth_token_value')
```

--------------------------------

### Override Nuxt Laravel Echo Configuration (nuxt.config.ts)

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/usage/configuration

This example demonstrates how to override default configuration settings for the nuxt-laravel-echo module. It shows how to set a specific `key` within the `echo` configuration and also how to override the `logLevel` using the `runtimeConfig.public.echo` property, allowing for environment-specific adjustments.

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

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

--------------------------------

### Configure API Request and Response Interceptors in Nuxt

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/other/interceptors

This example demonstrates how to configure request and response interceptors using `app.config.ts`. It adds a custom header to outgoing requests and logs both requests and responses using a Consola logger. The interceptors receive the Nuxt app instance, fetch context, and logger as arguments.

```typescript
import type { FetchContext } from 'ofetch'
import type { ConsolaInstance } from 'consola'

export default defineAppConfig({
  echo: {
    interceptors: {
      onRequest: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        ctx
          .options
          .headers
          .set('X-Custom-Headers', 'custom-value')

        logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
      },

      onResponse: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
      },
    },
  },
})
```

--------------------------------

### Local Token Storage Implementation (TypeScript)

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/other/token-storage

An example implementation of a custom token storage handler using browser's localStorage. This handler is configured in app.config.ts and is suitable for CSR mode, storing the token under a specific key. It handles cases where the token is absent or needs to be removed.

```typescript
// LocalStorage example for Laravel Authentication token
const tokenStorageKey = 'echo.storage.token';
const localTokenStorage: TokenStorage = {
    get: async () => {
        if (import.meta.server) {
            return undefined;
        }

        return window.localStorage.getItem(tokenStorageKey) ?? undefined;
    },

    set: async (app: NuxtApp, token?: string) => {
        if (import.meta.server) {
            return;
        }

        if (!token) {
            window.localStorage.removeItem(tokenStorageKey);
            return;
        }

        window.localStorage.setItem(tokenStorageKey, token);
    },
};

export default defineAppConfig({
    sanctum: {
        tokenStorage: localTokenStorage,
    },
    echo: {
        tokenStorage: localTokenStorage,
    },
});
```

--------------------------------

### Client Component: Subscribe to Public and Private Channels with useEcho

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/composables/useecho

This client-side Vue component demonstrates how to use the `useEcho` composable to subscribe to public and private channels. It includes functions to manage listeners, handle incoming messages, and displays received messages. Ensure your backend is configured for authentication for private channels.

```typescript
import { ref, onMounted } from 'vue';

const echo = useEcho();

const messages = ref<string[]>([]);
const writeNewMessage = (e: object) => messages.value.push(JSON.stringify(e));

function stopAllListeners() {
  echo.leaveAllChannels();
}

function subscribeToPublicChannel() {
  const name = 'public';
  const event = '.PublicEvent';

  echo
    .channel(name)
    .listen(event, (e: object) => writeNewMessage(e))
    .error((e: object) => {
      console.error('Public channel error', e);
    });
}

function subscribeToPrivateChannel() {
  const name = 'users';
  const event = '.PrivateEvent';

  echo
    .private(name)
    .listen(event, (e: object) => writeNewMessage(e))
    .error((e: object) => {
      console.error('Private channel error', e);
    });
}

onMounted(() => {
  subscribeToPublicChannel();
  subscribeToPrivateChannel();
});
```

--------------------------------

### Default Nuxt Laravel Echo Configuration (nuxt.config.ts)

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/usage/configuration

This snippet shows the default configuration for the nuxt-laravel-echo module within a Nuxt application. It specifies the broadcaster, host, port, scheme, transport methods, authentication details, log level, and properties. These defaults are applied if no specific configuration is provided.

```typescript
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,
  },
});
```

--------------------------------

### Configure Nuxt Laravel Echo in nuxt.config.ts

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/usage/configuration

This configuration snippet demonstrates how to set up the Nuxt Laravel Echo module in your nuxt.config.ts file. It includes setting the broadcasting key and custom properties for the Echo instance.

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

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

--------------------------------

### Environment Variable Override for Nuxt Echo Key (.env)

Source: https://manchenkoff.gitbook.io/nuxt-laravel-echo/usage/configuration

This snippet illustrates how to override Nuxt Laravel Echo configuration options using environment variables. Specifically, it shows how to set the `NUXT_PUBLIC_ECHO_KEY` in a `.env` file, which is a common practice for managing sensitive credentials and configuration in a decoupled manner.

```env
NUXT_PUBLIC_ECHO_KEY='REPLACE_ME'
```
Tokens:
Raw