Structuring the Vue.js Application

Introduction

In this lesson, we are going to structure our chat application. We will be incrementally adding features to it to have a working clone of WhatsApp by the end of the course. Please note that there are several ways you can structure your application. Make sure you do not put all content and functions into one component but instead break it into reusable building blocks.

Vue components

Throughout this section, we are going to create several components. When we are structuring your application, we will need to understand its components. The general principle is that we do not want to have everything in one Vue.js file. We would like to decouple our components to be sure we are building a scalable application. Let’s assume that we’re working on the profile page. It will have the following information:

1. General user information
2. Payment information
3. Profile picture

We can take advantage of what ...