How To Build Live Chat App In Laravel 9 And Vue JS

Websolutionstuff | Feb-02-2023 | Categories : Laravel PHP VueJs

In this article, we will see how to build a live chat app in laravel 9 and vue js. Here, we will learn how to create real-time chat applications in laravel 8 and laravel 9 with vue.js and pusher. For this example need basic knowledge of laravel and vue.js for better understanding.

In laravel, easy to build modern applications with real-time interaction with the help of an event broadcasting system.  which allows developers to share the same event names between the server-side code and the client-side JavaScript application. Also, we will see how to create an event in laravel 9. And learn more about Laravel Events.

Pusher is an easy and reliable platform for building real-time applications. Also, Laravel is support Pusher, which makes building realtime applications with laravel and pusher seamless.

So, let's see build chat app with vue.js and laravel 9 using pusher, real time chat application in laravel 8 and laravel 9, laravel 8/9 chat application with pusher, and how to build a laravel chat application with pusher.

Laravel Live Chat with Vue JS and Pusher


Build a chat app with Laravel with Vue.js and Pusher


Step 1: Install laravel 9

In this step, we will install the laravel 9 application using the following composer command.

composer create-project laravel/laravel laravel-9-vue-js-live-chat-example


Step 2: Create Pusher Account

Now, we will create Pusher Account. The Channels sandbox plan is completely free. Create Pusher Account.

How to create a Channels app

Once you have signed up for a Pusher account you need to create a Channels.



After that, create an application and add a pusher application name, cluster, and stack. The tech stack settings are optional.


From the App Keys page note down the app_idkeysecret and cluster as you will need these to connect to your Channels app.


Set up a Laravel environment

For this tutorial, you will need PHP 7/8, Composer 2, and Node.js 16 or latest version of node. For Windows see instructions for PHPComposer and Node.



Step 3: Configure Pusher

In this step, we will set up a pusher. So, Register for the Broadcast application service by opening config/app.php and uncommenting this line.

// App\Providers\BroadcastServiceProvider::class,

Note: If you face the error Class 'Pusher\Pusher' not found add the below code into the config/app.php file.

'aliases' => [


        'Pusher' => Pusher\Pusher::class,


After that, open the .env file and change the BROADCAST_DRIVER from its default “log” value to “pusher".


Now, we will set up the Pusher ID and key in the .env file. Laravel already integrates some of the Pusher configurations, so you just need to fill in the keys you got when you created your Channels app.



Step 4: Install pusher/pusher-php-server

In this step, we will install pusher/pusher-php-server using the composer command.

composer require pusher/pusher-php-server


Step 5: Install Laravel Echo and Pusher JS

Now, we will install laravel Echo, which is the javascript library for listening to broadcast events and pusher-js for connecting your client to Pusher.

npm install --save laravel-echo pusher-js

After that, we will uncomment the pusher credentials in Echo Client.


import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true

The public key and cluster are already taken from your .env file that we previously updated.


Step 6: Create Auth System

In this step, we will create auth system using the following command. So, run the below command and create the basic login and register.

install the laravel/ui package

composer require laravel/ui

After that, create vue js login page using the following command.

php artisan ui vue --auth

And now compile dependencies using the below command.

npm install && npm run dev



Step 7: Configure Database

Now, we will configure database details in the .env file.


After that, migrate the table into the database using the below command.

php artisan migrate


Step 8: Create Model and Migration

In this step, we will create Message model and create a message table using the below command.

php artisan make:model Message --migration



namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Message extends Model
    use HasFactory;
    protected $fillable = ['message'];



Add user_id and message columns to your messages schema.

public function up()
        Schema::create('messages', function (Blueprint $table) {

Now run the migrations to add the messages table to the database.

php artisan migrate

Now, We will setup a one-to-many relationship between users and their many messages.

In app/Models/User.php add the messages() function to the User class

class User extends Authenticatable
    use HasApiTokens, HasFactory, Notifiable;

    protected $fillable = ['name','email','password',];
    protected $hidden = ['password','remember_token',];
    protected $casts = ['email_verified_at' => 'datetime',];

    //Add the below function
    public function messages()
        return $this->hasMany(Message::class);

Then we define the user() function in the Message class in app/Models/Message.php.

class Message extends Model
    use HasFactory;
    protected $fillable = ['message'];

    //Add the below function
    public function user()
        return $this->belongsTo(User::class);



Step 9: Add Routes

In this step, we will add routes in the web.php file.



use Illuminate\Support\Facades\Route;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!

Route::get('/', function () {
    return view('welcome');


Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/chat', [App\Http\Controllers\ChatsController::class,'index']);
Route::get('messages', [App\Http\Controllers\ChatsController::class,'fetchMessages']);
Route::post('messages', [App\Http\Controllers\ChatsController::class,'sendMessage']);


Step 10: Create ChatsController

Now, we will create a ChatsController using the following command.

php artisan make:controller ChatsController



namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Message;
use Illuminate\Support\Facades\Auth;
use App\Events\MessageSent;

class ChatsController extends Controller
    public function __construct()

     * Show chats
     * @return \Illuminate\Http\Response
    public function index()
        return view('chat');

     * Fetch all messages
     * @return Message
    public function fetchMessages()
        return Message::with('user')->get();

     * Persist message to database
     * @param  Request $request
     * @return Response
    public function sendMessage(Request $request)
        $user = Auth::user();

        $message = $user->messages()->create([
            'message' => $request->input('message')

        broadcast(new MessageSent($user, $message))->toOthers();

        return ['status' => 'Message Sent!'];

$this->middleware('auth') in __contruct() will only allow authorized users to access ChatsController’s methods.



Step 11: Create Chat View

Now, we will create a chat.blade.php file.




<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">How To Build Live Chat App In Laravel 9 And Vue JS - Websolutionstuff</div>

                <div class="panel-body">
                    <chat-messages :messages="messages"></chat-messages>
                <div class="panel-footer">
                        :user="{{ Auth::user() }}"

After that, we will create a vue component chatMessage.vue and chatForm.vue. The chat-messages component will display our chat messages and the chat-form will provide an input field and a button to send the messages.


	<ul class="chat">
		<li class="left clearfix" v-for="message in messages" :key="">
			<div class="clearfix">
				<div class="header">
						{{ }}
				{{ message.message }}
	export default {
		props: ["messages"],


    <div class="input-group">    
        class="form-control input-sm"
        placeholder="Type your message here..."
        <span class="input-group-btn">      
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
export default {  
    props: ["user"],
    data() {
        return {
        newMessage: "",
    methods: {
        sendMessage() {      
        this.$emit("messagesent", {
            user: this.user,      
            message: this.newMessage,
        this.newMessage = "";

Next, we will register vue component in the root Vue instance.


 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.


window.Vue = require('vue').default;

 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('chat-messages', require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.

const app = new Vue({
    el: '#app',

    //Store chat messages for display in this array.
    data: {
        messages: []
    //Upon initialisation, run fetchMessages(). 
    created() {

        .listen('MessageSent', (e) => {
            message: e.message.message,
            user: e.user
    methods: {
        fetchMessages() {
            //GET request to the messages route in our Laravel server to fetch all the messages
            axios.get('/messages').then(response => {
                //Save the response in the messages array to display on the chat view
                this.messages =;
        //Receives the message that was emitted from the ChatForm Vue component
        addMessage(message) {
            //Pushes it to the messages array
            //POST request to the messages route with the message data in order for our Laravel server to broadcast it.
  '/messages', message).then(response => {

We will use Laravel Echo to subscribe to the private chat channel and listen() for the MessageSent event.



Step 12: Create Broadcasting Message Sent Event

In this step, we will create Message event using the below command. So, add the below code to that file. Also, Add the implements ShouldBroadcast interface to the MessageSent class

php artisan make:event MessageSent



namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Models\User;
use App\Models\Message;

class MessageSent implements ShouldBroadcast
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $user;
    public $message;
     * Create a new event instance.
     * @return void
    public function __construct(User $user, Message $message)
        $this->user = $user;
        $this->message = $message;

     * Get the channels the event should broadcast on.
     * @return \Illuminate\Broadcasting\Channel|array
    public function broadcastOn()
        return new PrivateChannel('chat');

we created a private channel by returning an PrivateChannel('chat') instance, only authenticated users will be able to listen to it. So, we need a way to authorize the currently authenticated user can actually listen on the channel. So, add the below code to the channels.php file.


Broadcast::channel('chat', function ($user) {
    return Auth::check();


Step 13: Run Laravel 9 and Vue JS Application

Now, we will build the application and run the application using the following command.

npm run dev
php artisan serve

Open two private web browser windows, log in as two users, and send a message from each other.




You might also like:

Recommended Post
Featured Post
How To Check Image Blur Or Not Using Python
How To Check Image Blur Or Not...

In this article, we will see how to check image blur or not using python. For blur image check we are using the OpenCV p...

Read More


How To Get Current Week Records In MySQL
How To Get Current Week Record...

In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...

Read More


How to Search Records using Laravel 10 Livewire
How to Search Records using La...

Hey developers! Today, I'm excited to walk you through an incredibly powerful feature in Laravel 10: searching...

Read More


How to Upload Multiple Image in Laravel 8
How to Upload Multiple Image i...

In this example we will see how to upload multiple image in laravel 8. here, we wil see tutorial of multiple image uploa...

Read More