Skip to content

nuxt-community/laravel-echo-module

Repository files navigation

@nuxtjs/laravel-echo

npm version npm downloads Github Actions CI Codecov License

Laravel Echo for Nuxt 2

📖 Release Notes

Requirements

If you use the broadcaster pusher, you need to ensure that you have pusher-js installed:

yarn add pusher-js # or npm install pusher-js

If you use the broadcaster socket.io, you need to ensure that you have socket.io-client installed:

yarn add socket.io-client # or npm install socket.io-client

Setup

  1. Add @nuxtjs/laravel-echo dependency to your project
yarn add --dev @nuxtjs/laravel-echo # or npm install --save-dev @nuxtjs/laravel-echo
  1. Add @nuxtjs/laravel-echo to the buildModules section of nuxt.config.js
export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/laravel-echo',

    // With options
    ['@nuxtjs/laravel-echo', { /* module options */ }]
  ]
}

⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/laravel-echo'
  ],
  echo: {
    /* module options */
  }
}

Options

broadcaster

  • Type: String
  • Default: 'null'

You can use 'pusher', 'socket.io' or 'null'.

See https://laravel.com/docs/broadcasting#driver-prerequisites

plugins

  • Type: Array
  • Default: null

If you have plugins that need to access $echo, you can use echo.plugins option.

Note: Plugins are pushed in client mode only (ssr: false).

nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/laravel-echo'
  ],
  echo: {
     plugins: [ '~/plugins/echo.js' ]
  }
}

plugins/echo.js

export default function ({ $echo }) {
  // Echo is available here
  console.log($echo)
}

authModule

  • Type: Boolean
  • Default: false

Integration with Auth Module.

connectOnLogin

  • Type: Boolean
  • Default: false

Connect the connector on login, if authModule is set true.

disconnectOnLogout

  • Type: Boolean
  • Default: false

Disconnect the connector on logout, if authModule is set true.

Usage

This module inject $echo to your project:

<template>
  <div>
    <h1>Orders</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$echo.channel('orders')
      .listen('OrderShipped', (e) => {
          console.log(e.order.name);
      });
  }
}
</script>

License

MIT License

Copyright (c) Nuxt Community