Preface

Welcome to the Vue.js community, which is one of the most friendly frontend communities. Vue.js is a frontend framework that allows you to build performant interactive web applications with ease. Vue.js has a shallow learning curve – getting started is easy! This book guides you on your first steps to creating Vue.js applications with increasing complexity and size.

Apart from showing you the technology and teaching you the best practices with Vue.js, the chapters of this book are set up to teach you about general development practices as well. The book lets you experience different approaches when dealing with new technology, implementing third-party solutions, or orchestrating more complex application structures.

There are many resources that focus on very specific use cases or even single components. The aim of this book is to offer a realistic and broad view of Vue.js developer responsibilities and expectations. Every chapter will result in a functional application. Every application introduces a new concept to familiarize yourself with.

I have designed the chapters to progress in a natural way, where we increase complexity with every chapter. I will enforce concepts iteratively over the course of multiple chapters. I am experienced in using Vue.js in a complex, enterprise-level environment where my experience in adopting useful practices and working with third-party solutions has shaped the focal points of the structure and chapters.

As a mentor and coach, I have tried to show and guide you through regular development processes – not writing perfect code from the start but embracing refactoring steps and improving software while an application grows.

The main goal of this book is to not only allow you to both learn and understand Vue.js and its ecosystem, but also prepare you to land a Vue.js developer job by growing a portfolio that showcases your capabilities as a professional web developer.

Using technologies such as Vue.js, Nuxt, Pinia, and Vite is what enables us to build the wildest applications. This is only possible because of the combined and relentless efforts of core maintainers and the numerous contributors that build and publish open source software. Please consider donating or participating to show your support as well. Any contribution to these frameworks or libraries is welcomed and much needed to keep maintaining and developing software that benefits us all.

Who this book is for

This book is aimed at software engineers with an affinity for web-based technologies. Anyone with a software engineering background should be able to quickly pick up the concepts in this book.

Primarily, the book aims to guide beginner or junior developers to familiarize themselves with Vue.js and frontend technologies and practices. This book helps them build up experience in a broad range of topics, which helps in more successfully applying for a position as a Vue.js developer.

While not the primary focus, any software engineer who is curious about the Vue.js ecosystem can very well progress through the chapters, building up a broad sense of the possibilities of using Vue.js as a framework to build applications.

If you have an affinity with one of the currently popular frontend frameworks or libraries such as React, Angular, Svelte, or Qwik, you will have a head start in grasping concepts such as reactivity, testing, and fetching data from APIs. If you are looking to transition to a Vue.js-orientated position, this book will get you up to speed with the Vue.js approach to common practices.

What this book covers

Chapter 1, Introduction to Vue.js, explains the core concepts we need to build Vue.js applications. It will help you set up a development environment with the recommended settings for Vue.js development.

Chapter 2, Creating a Todo List App, builds upon the core concepts and explains a key concept in creating interactive web applications – reactivity. It also introduces the development and debugging tools as important tools to maintain and inspect applications.

Chapter 3, Building a Local Weather App, explores external data as a resource of a web application. It will add a testing framework to the application, which we can use to increase the robustness of the application by identifying both happy and unhappy user flows and how to deal with those.

Chapter 4, Building the Marvel Explorer App, leans heavily on interacting with a great volume of external data and connecting to public APIs to retrieve the correct data for a user. It uses composables (a concept for working with stateful logic) to use and reuse functions and compose more complex behavior. By leveraging the default router, we will introduce multiple views and routes to an application.

Chapter 5, Building a Recipe App with Vuetify, teaches you how to use third-party libraries, such as Vuetify, to quickly build an interface. It will strengthen the concept of working with APIs by iteration and introduce Pinia, the default state management library for Vue.js. With Pinia, you will learn to persist state in the browser. You will learn refactoring techniques and experience dealing with changing features and requirements.

Chapter 6, Creating a Fitness Tracker with Data Visualization continues the topic of persisting state and teaches you how to store data in an external database, as well as adding entry-level authentication to a web application. It demonstrates trade-offs between abstraction and a more pragmatic approach when building a feature, revisiting refactoring strategies.

Chapter 7, Building a Multi-Platform Expense Tracker Using Quasar, sidesteps in a different direction, where you learn how to use web technologies to build applications for one or even multiple non-web platforms using a framework. It continues to solidify previously learned topics by revisiting similar tech stacks but with different goals and features in mind.

Chapter 8, Building an Interactive Quiz App, dives deep into developing an app from backend to frontend and includes architectural concepts and decisions as well. It introduces Nuxt, which is one of the most popular and developer-friendly meta frameworks for the Vue.js ecosystem. You will interact with WebSockets and see how to create real-time interactivity between multiple clients at the same time.

Chapter 9, Experimental Object Recognition with TensorFlow, teaches you the prototyping practices and how to familiarize yourself with new technologies by experimenting in an isolated environment. It also touches upon developing and testing early on a specific target. Most importantly, it teaches you to have a bit of fun when building new projects, keeping you interested and motivated in your own continuous development.

Chapter 10, Creating a Portfolio with Nuxt.js and Storyblok, circles back to Nuxt as a framework to generate code, instead of acting as a real-time web server. This chapter allows you to create a personal project, where you can showcase your talents as a developer while progressing through this book. It connects the application to a headless content management system (CMS) and teaches you how to automate tasks such as deployments.

To get the most out of this book

As the bare minimum to understand the concepts we will cover, experience with HTML, CSS, and JavaScript and basic knowledge of web engineering are highly recommended.

Software/hardware covered in the book	Operating system requirements
Vue.js 3	Windows, macOS, or Linux
Vue Test Utils
Nuxt 3
Pinia
Vuetify
Tailwind
Chart.js
Quasar
Express.js
Socket.io
TensorFlow.js

The libraries mentioned will have installation instructions in the sections where they are introduced and used. To follow along with the code, you can find links to the lengthier code blocks in the text, which point to the repository that is part of this book.

The completed code for each chapter can also be downloaded from the repository, or simply viewed only as a reference. In some cases, the repository itself may need additional setup with third-party providers for it to work. These instructions are all listed in the relevant sections.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

If you encounter issues while building the projects, you can always refer to the source code on the GitHub repository. Each chapter includes a TROUBLESHOOTING.md file to help you on your way if you run into problems.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Code in Action

The Code in Action videos for this book can be viewed at http://bit.ly/2OQfDum.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “The v-for directive repeats the <li> item with a <ListItem /> component enclosed.”

A block of code is set as follows:

<style scoped>ul {
  list-style: none;
}
li {
  margin: 0.4rem 0;
}
</style>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<ListItem :is-checked='item.checked' v-on:click.prevent="updateItem(item)">{{ item.title }}</ListItem>

Any command-line input or output is written as follows:

npm init vue@latest

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Click Save to close the foreign key property.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Building Real-World Web Applications with Vue.js 3, we’d love to hear your thoughts! Please visit https://packt.link/r/1837630399 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781837630394

2. Submit your proof of purchase
3. That’s it! We’ll send your free PDF and other benefits to your email directly