Laravel Echo for Nuxt 2
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
@nuxtjs/laravel-echo
dependency to your projectyarn add --dev @nuxtjs/laravel-echo # or npm install --save-dev @nuxtjs/laravel-echo
@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 */ }]
]
}
:warning: 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 */
}
}
broadcaster
String
'null'
You can use 'pusher'
, 'socket.io'
or 'null'
.
See https://laravel.com/docs/broadcasting#driver-prerequisites
plugins
Array
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
Boolean
false
Integration with Auth Module.
connectOnLogin
Boolean
false
Connect the connector on login, if authModule
is set true
.
disconnectOnLogout
Boolean
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>
Copyright (c) Nuxt Community