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

Building the collections

Strapi uses collections to denote resources; for example, if your application is a news application and you want to create a backend that will process posts, comments, and so on, you will create it as a Posts, Comments collection in Strapi.

However, since we are building a Pinterest clone, we will create the following collections: Photo(Pin), Board, and User, and each of these collections will contain their respective fields, as demonstrated in the following steps.

To demonstrate, we will create a simple Photo(Pin) collection that will store the details of a specific photo in our app. In Pinterest, it is called PIN, but we will prefer to call it as PHOTO since we started with that in the previous chapters.

Now to store the details of our photo, we will create a new Collection Type called photos in the Strapi dashboard.

The photos collection will have the following fields: title, url, user_id, and description. These fields are imaginative and can...