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.
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