@nuxtjs/laravel-echo

Laravel Echo for Nuxt.js

📖 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

2. 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