The register page and login page that we built in the previous two chapters mainly handle form submissions, which are relatively simple. In this chapter, we are building the home page of TaskAgile, which contains more functionalities, as you will see. We will introduce Vuex, the official library for state management in Vue applications.

As usual, in this chapter, we will show you how the home page will look and then break down the task of implementing that page into small steps so that you can see how it is created step by step. We will skip the details of the parts that have already been mentioned before. As always, you can find those skipped details in the commit history.

In this chapter, you will learn about the following:

• Introduction of frontend state management with Vuex
• Building a modal window with the Bootstrap modal component
• Different ways to manage one-to-many and many-to-many relationships
• Add i18n support with Vue-i18n
• Logging SQL queries that Hibernate sends to the database for performance tuning