Book Image

Architecting Vue.js 3 Enterprise-Ready Web Applications

By : Solomon Eseme
Book Image

Architecting Vue.js 3 Enterprise-Ready Web Applications

By: Solomon Eseme

Overview of this book

Building enterprise-ready Vue.js apps entails following best practices for creating high-performance and scalable applications. Complete with step-by-step explanations and best practices outlined, this Vue.js book is a must-read for any developer who works with a large Vue.js codebase where performance and scalability are indispensable. Throughout this book, you’ll learn how to configure and set up Vue.js 3 and the composition API and use it to build real-world applications. You’ll develop the skills to create reusable components and scale performance in Vue.js 3 applications. As you progress, the book guides you in scaling performance with asynchronous lazy loading, image compression, code splitting, and tree shaking. Furthermore, you’ll see how to use the Restful API, Docker, GraphQL, and different types of testing to ensure that your Vue.js 3 application is scalable and maintainable. By the end of this book, you’ll be well-versed in best practices for implementing Restful API, Docker, GraphQL, and testing methods to build and deploy an enterprise-ready Vue.js 3 application of any scale.
Table of Contents (21 chapters)
1
Part 1: Getting Started with Vue.js
4
Part 2: Large-Scale Apps and Scaling Performance in Vue.js 3
9
Part 3: Vue.js 3 Enterprise Tools
11
Part 4: Testing Enterprise Vue.js 3 Apps
16
Part 5: Deploying Enterprise-ready Vue.js 3

Connecting the frontend and backend

The most interesting part is how we structure our API requests to accommodate maintainability and easy adaptability, following the best practices we have learned from the previous chapters.

The following screenshot shows our folder structure containing the GraphQL endpoints according to the features we currently have in our application and in the Strapi backend we developed for this project:

Figure 6.12 – A screenshot of the new folder structure with GraphQL and Strapi

Figure 6.12 – A screenshot of the new folder structure with GraphQL and Strapi

In the graphql folder, we have defined three folders, namely auth, photos, and users, which represent the features our current project will have. Let’s look at what these folders contain.

The auth folder

The auth folder contains only a single mutation which will handle all the authentication and authorization functionalities. It will contain mutations, such as register, login, forgotPassword, sendForgotPasswordEmail, and so on.

...