How to Broadcast events with Laravel Echo and Vuejs Part 2
In the second part of this tutorial, we will add Vuejs 3 to Laravel 9 and install Pusher and Laravel Echo, and finally, we will create our Notification Component.
Create the login.blade.php
The content of the file login.blade.php:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-md-8">
@if (session()->has('error'))
<div class="alert alert-danger my-3">
{{session()->get('error')}}
</div>
@endif
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Add vue js 3 and install the packages
Next, we will add Vuejs 3 to our project follow this link to do that.
Now let's add the packages that we will need:
npm install laravel-echo
npm install pusher-js
composer require pusher/pusher-php-server
Set up pusher application
Next, go to pusher log in and create a new application, get your credentials and inject in the .env file.
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
Create notification component
Inside the js folder, we add new folder components inside the new folder created we add a new component Notification.vue.
<template>
<div v-show="data.show" :class="`alert my-2 ${data.class}`">
{{ data.message }}
</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
const data = reactive({
message: '',
class: '',
show: false
});
onMounted(() => {
Echo.private('notifications')
.listen('UserSessionChanged', (event) => {
data.message = event.message;
data.class = event.type;
data.show = true;
});
});
</script>
<style>
</style>
Update app.js
Inside app.js we import the notification component and we register it as a global component.
import './bootstrap';
import {createApp} from 'vue/dist/vue.esm-bundler.js';
import Notification from '@/components/Notification.vue';
const app = createApp({});
app.component('notification-component', Notification);
app.mount("#app");