Structuring the Vue.js Application
Explore how to effectively structure your Vue.js chat application by breaking it into reusable components, registering child components, and sharing data using props. This lesson introduces best practices for organizing your app's layout, configuring routing and Vuex, and preparing your project for scalable development.
We'll cover the following...
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:
- General user information
- Payment information
- Profile picture
We can take advantage of what ...