npm version npm downloads Github Actions CI Codecov License

Laravel Echo for Nuxt 2

📖 Release Notes

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

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.

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

• Type: String
• Default: 'null'

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

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

• 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)
}

• Type: Boolean
• Default: false

Integration with Auth Module.

• Type: Boolean
• Default: false

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

• Type: Boolean
• Default: false

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

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>

MIT License

Copyright (c) Nuxt Community