Creating the frontend to let users chat

Now that we have the backend code all finished and running, we can work on the frontend. The frontend is not very different from what we had in the earlier chapters. We use the Vue CLI to create our project in the frontend folder of the vue-example-ch8-chat-app folder and then we can start writing our code.

In the vue-example-ch8-chat-app/frontend folder, we run vue create, then we choose select version, then we select the Vue 3 option with Vue Router option enabled. Once the Vue CLI wizard finishes running, we can start building our frontend.

Installing the Vue dependencies

In addition to the Vue dependencies, we also need to install the Axios HTTP client, the Socket.IO client, and the Laravel Echo client package to make HTTP requests and listen to events emitted from the server side via the Laravel Echo Server respectively. To install those, we run the following command:

npm install axios socket.io-client laravel-echo

First,...