Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /