Introduction

Vue.js or Vue (pronounced view) is a progressive (incrementally adoptable) front-end JavaScript framework that you can use to create engaging user interfaces and primarily single-page applications.

Vue was created by Evan You after using Angular for various projects while working for Google. His idea was to use the parts of Angular that he liked and build something straightforward and lightweight, while keeping many of the fantastic features and the power of Angular.

Vue uses an HTML-based template syntax that allows reactive data binding to the DOM and can extend essential HTML elements as reusable components. It also supports front-end hashed routing through the open-source Vue Router package.

Given its simplicity and powerful features, developers have flocked to the framework, making Vue one of the top currently trending projects on GitHub, and one of the world's leading JavaScript frameworks (at the time of writing this book) with no signs of slowing down.

Besides its excellent productivity features, Vue's success is closely tied to JavaScript's ascension as the go-to language for developing modern web applications.

Vue can also be used when starting an application from scratch—when you want to add more business logic to your front end rather than the back end. It has a rich package ecosystem that provides great core features and others that manage state and handle routing.

Vue allows applications to quickly scale by supporting reusable components out of the box—each has its own HTML, CSS, and JavaScript, meaning that an application can be split into smaller functional parts, which can be reused.

All these features make Vue an excellent choice for developing front-end applications and a great framework to learn, making you a more productive and valuable developer in the market.

Vue 3 introduces several significant changes and improvements over Vue 2, such as the Composition API (the most critical difference between both versions), custom directives, smaller bundle size, improved TypeScript support, Vue Router, and performance improvements. We'll explore some of these differences later in the book.

Throughout this book, we'll build a web app that we can use to keep track of important personal documents that have expiration dates, such as passports, driver’s licenses, or credit cards—the same app described in Flutter Succinctly and Vue.js Succinctly (which covers Vue 2).

The following figure shows what the Flutter app concept looks like:

Figure 0-a: The Mobile Version of the Demo App

We'll use Vue 3 to re-create this concept, but instead of giving it the same mobile app look and feel, we'll create a web app with similar functionality; however, the UI will look different.

The approach behind this book is to create the Vue 3 app step-by-step while simultaneously exploring the essential Vue 3 features required to build a minimal functional application by using the Composition API and focusing on the implementation aspect of it.

Having some prior experience working with Vue 2 is recommended. If you don’t, the Succinctly series has you covered with either Vue.js Succinctly or Nuxt.js Succinctly, which I recommend you check out first.

So, without further ado, let's explore and dive right in.

GitHub code repo

You can download the code for this book from this GitHub repo.