Preface #

Why Vue, Vite and what we mean by "large scale apps" in this book.

Vue offers a simple and intuitive API that allows for a reactive and modular architecture, making it a popular choice for building user interfaces. Additionally, Vue is highly performant and boasts a large and active community of developers, making it a great choice for building applications of any scale.

Vite, on the other hand, is a relatively new player in the front-end development world but brings a number of important benefits to the table. With Vite, we can build and serve our application in near real-time, making it ideal for development. Additionally, Vite has a small build size and is highly optimized for speed, making it a great choice for large scale applications. It offers several benefits, including:

• Faster build times and development experience compared to traditional bundlers.
• Lower initial load times, as only the essential code is loaded
• Improved build size, as Vite only includes the necessary code
• Lightweight and optimized for modern web development.

When we refer to "large scale apps", we mean applications that have a large code base, a large number of users, and a wide range of functionality. These applications typically require efficient and scalable code that can handle high traffic and large amounts of data.

In this kind of projects there are several common concerns that arise, such as:

• Code maintenance and scalability
• Code quality and performance
• Code organization and structure

To address these concerns, here we will outline best practices for code organization and structure, such as using a centralized state manager and implementing strong-type checking with TypeScript. Additionally, we will focus on writing unit tests for our models and components, which will help improve code quality and catch bugs early in the development process.

Our ultimate goal is to build a foundation that can handle the demands of our app and be easy to expand and maintain as the code base grows.

Goal #

The primary aim of this book is to guide you through the process of building a scalable Vue application by following best practices for project structure, file organization, naming conventions, state management, type checking with TypeScript, and compositional approaches using hooks.

Throughout the chapters, we will grow our simple project into a robust, large-scale application that is easy to expand and maintain, showcasing how patterns, conventions, and strategies can lay a solid foundation and keep the code organized and uncluttered.

We will build a TypeScript API client that can seamlessly switch between serving static mock data and communicating with a live API, allowing for front-end development to commence even before the back-end API is fully functional. Additionally, we will delve into topics such as internationalization, localization, and advanced techniques, to round out our comprehensive guide to building a scalable Vue application.

IMPORTANT: We will initially write code that allows us to achieve the desired functionality quickly, even if it requires more code, but then we constantly "rework" it (refactoring) to improve it and find solutions that allow us to reduce the amount of code used, or to organize it in a clear and easy way that is easy to expand and maintain. So arm yourself with a lot of patience!

IMPORTANT: We will initially write code that allows us to achieve the desired functionality quickly, even if it requires more code, but then we constantly "rework" it (refactoring) to improve it and find solutions that allow us to reduce the amount of code used, or to organize it in a clear and easy way that is easy to expand and maintain. So arm yourself with a lot of patience!

Thanks #

First, I would like to thank Evan You^[1], the creator of Vue.js^[2]. Thank you for not giving up on this project a few years ago when it was still small and people were still skeptical about it. You gave us an amazing gift with such a lightweight and performing framework, which is progressive and not opinionated like many others out there.

I want to thank my son for helping me proof read and validate the steps in each chapter by building the same project. I also would like to thank all the developers that over the time helped me correct things in the book and provided valuable feedback.

About me #

I have worked as a software developer for more than 20 years. I switched career from being a full time musician when I was 30 years-old and then became a graphic designer, then transition to a web designer when internet became "a thing", and for many years after that worked as full-stack developer using Microsoft .NET, JavaScript, Node.js and many other technologies. You can read more about me on my personal website https://www.damianofusco.com and LinkedIn profile https://www.linkedin.com/in/damianofusco/. You will find me also on Twitter, @damianome, and GitHub github.com/damianof

Audience #

The audience for this book is from beginners with some experience in MV* applications, to intermediate developers. The format is similar to a cookbook, but instead of individual recipes we'll go through creating a project and keep enhancing, refactoring, and make it better as we move forward to more advanced chapters to show different patterns, architectures, and technologies.

Note: Some of the patterns illustrated here are not specific to Vue, but can applied in any application written in TypeScript or JavaScript. For example, most code from Chapters 3, 7, and others can also be used in Svelte/React/Angular or other front-end apps. Similarly, code from Chapters 3 and 14 can also be used in NodeJS apps.

Text Conventions #

I will highlight most terms or names in bold, rather than define different fonts/styles depending on whether a term is code, or a directory name or something else.