Building Real-World Web Applications with Vue.js 3: Build a portfolio of Vue.js and TypeScript web applications to advance your career in web development

BIRMINGHAM—MUMBAI

Building Real-World Web Applications with Vue.js 3

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Kushal Dave

Book Project Manager: Sonam Pandey

Senior Editor: Anuradha Joglekar

Technical Editor: Reenish Kulshrestha

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Aparna Bhagat

DevRel Marketing Coordinators: Namita Velgekar and Nivedita Pandey

Publication date: January 2024

Production reference: 1131223

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83763-039-4

www.packtpub.com

To my wife, Lydia, for encouraging me to try new things, supporting me, and giving me the space to grow and pursue ambitious goals. To my kids, Joep and Lena, for your regular distractions, for your general curiosity, and for teaching me to see the world through different eyes.

– Joran Quinten

Contributors

About the author

Joran Quinten has a passion for getting people to love technology and getting technology to play nice. With over a decade of experience in developing and designing software, he has built up a broad background in development and architecture. He loves sharing knowledge and has been invited to speak at several tech events. Joran graduated from Fontys University of Applied Sciences, Eindhoven, in 2010. Currently, he works for Jumbo Supermarkten, a national grocery chain, where he is the technical lead of the design system team and acts as an ambassador for the tech department. He is passionate about mentoring and coaching junior developers. Joran lives close to Eindhoven with his wife, son, and daughter.

I want to express gratitude to my supportive team of editors and reviewers who have been of great help in helping me to find the right tone and in offering encouragement throughout the writing process. Special thanks to my wife, Lydia, and my kids, who teach me to take up and experience new challenges. And finally, thanks to family, friends, and colleagues who have been interested in and supportive of this journey.

About the reviewers

Abdallah Idriss Lutaaya is a software engineer with more than four years of experience in full stack development. He holds a master’s in computer science from the International University of Applied Sciences, Germany, and a bachelor’s from Makerere University, Uganda.

Abdallah excels in crafting scalable web applications and building robust backend systems for seamless integration.

His language repertoire includes Python, JavaScript, Dart, Node.js, TypeScript, SQL, and Dart, with mastery in React.js, Vue.js, Flutter, Django, and Flask. Abdallah brings a unique mix of academic rigor and practical experience.

Javier Suarez is an experienced software developer with over eight years of experience in building web applications. He possesses a strong proficiency in a wide range of technologies, including Vue.js, Quasar Framework, Nuxt, Pinia, Vite, JavaScript, Django REST Framework, Python, Git, and Linux.

Javier worked as a frontend developer at Housettel in Malaga. During his time there, he made significant contributions to the implementation of property management systems, leveraging his skills in Vue.js and Quasar Framework with TypeScript. His efforts resulted in a reduction in the time required for real estate listings.

He also served as a frontend developer at CodigoJS in Seville. In this role, he played a key role in developing a web application for managing neighborhood associations. Javier utilized his expertise in Django/Python, Vue.js, and Quasar Framework to create an efficient and user-friendly solution.

Since 2022, Javier has been working as a frontend developer at Mind Movies LLC in San Diego, CA. In this position, he has developed a web application using Vue.js, JavaScript, and Quasar Framework. He successfully deployed the application to AWS as a Progressive Web App (PWA). Collaborating with a team of engineers, he has contributed to the design and implementation of various features within the application.

Pyae Sone Win is an experienced full stack developer with over five years of professional experience in web application and website development. His expertise lies in utilizing programming languages such as PHP, Laravel, and JavaScript to build efficient and effective solutions. He is well versed in using MVC frameworks and data models to design and develop web applications that are both functional and user-friendly. He is also skilled in automated scripts with webpack and single-page applications with Vue.js and React.js.

In addition to his web development skills, Pyae is also experienced in mobile application development for retail e-commerce and education platforms. He has a strong understanding of both iOS and Android development, allowing him to deliver high-quality solutions for both platforms.

He is familiar with the AWS production environment and has experience maintaining and deploying customer-facing applications on the platform. He is also well versed in the best development practices, such as TDD and Scrum, ensuring that he is able to deliver high-quality solutions that meet the needs of his clients.

He is passionate about his work and is always looking for new challenges and opportunities to improve his skills. He is a team player who can easily adapt to new technologies and thrive in fast-paced, deadline-driven environments. He is confident that his skills and experience make him an excellent candidate for any web development or mobile development project.

Table of Contents

Preface

Part 1: Getting Started with Vue.js Development

1

Introduction to Vue.js

Technical requirements

The need for Vue.js

Requirements and tooling

Online resources

Setting up the development environment

Integrated development environment

Vue.js DevTools

My first app

The project in the IDE

Your first coding steps

Summary

2

Creating a Todo List App

A new project

Cleaning up the default installation

Building up the app

Creating the ListItem component

Creating the list

Making a list

Reactivity explained

Sorting the list

Preserving changes to the list

Single File Components

The Vue.js DevTools

Inspecting a component

Manipulating a component

Summary

3

Building a Local Weather App

Technical requirements

Initializing the app

Working with different types of APIs

Handling data from a third-party API

Constructing the API call

Styling with Tailwind

Utility classes

Formatting data

Custom style use cases

Ensuring stability with Vitest

Vue Test Utils

Global test functions

A simple component test

Mocking external sources

Mocking for success

Unhappy path

Testing with APIs

Summary

4

Creating the Marvel Explorer App

Technical requirements

Getting started with our new project

The Superhero connection

Marvelous routes in a single-page application

Optional parameters

Paging Dr Strange

A simple pagination component

Composables, assemble!

Refactoring useComics

Reassembling functionalities

Managing the roster

Searching for heroes

Adding search

An overview with superpowers

A different vision

Handling the error

Adding query parameters

Summary

Part 2: Intermediate Projects

5

Building a Recipe App with Vuetify

Technical requirements

A new Vue project

Let’s get cooking

Quick development with Vuetify

Connecting the recipes to our app

A bit of additional setup

Our API connection

Selecting a recipe

Adding and removing a meal

Using Pinia for state management

Stateful applications

Adding Pinia

The first store

The meal planner store

Computed store values

Summary

6

Creating a Fitness Tracker with Data Visualization

Technical requirements

Creating a client

Setting up the database

Handling the user

User store

Authenticating users

Protected routes

Logging out

App state

Centralized dialog

Centralized app menu

Exercise tracking

Selecting a date

Adding a routine

Saving to the database

Our hard work visualized

A view-based dashboard

History and overview

Graphs

Summary

7

Building a Multiplatform Expense Tracker Using Quasar

Technical requirements

Setting up the database

Using Quasar to build a project

Authenticating with Supabase and Quasar

Routes and app structure

Expense tracking features

Managing categories

Adding expenses

Showing expenses and an overview

Building the app with the Quasar CLI

A custom icon

Packaging for different targets

Summary

Part 3: Advanced Applications

8

Building an Interactive Quiz App

Technical requirements

Entities in the quiz app setup

Setting up the database

The SQA

Modules and auto-imports

File-based routing

Reintroducing two familiar friends

Dynamic file-based routes

Setting up the SQS

Nuxt API routes

Setting up a basic Node project

Executing scripts in parallel

Why sockets?

Completing the SQS

Creating the CQA

Setting up the app

Adding the socket client

Listening to socket events

Automated route changes

Player management in the lobby

We need some answers

Keeping and showing the score

Summary

9

Experimental Object Recognition with TensorFlow

Technical requirements

Introduction to TensorFlow

Setting up the project

Performing and displaying a status check

Selecting an image

Adding a voice to the app

Learning from the prototype

Scavenge Hunter

Setting up the project

Starting a new game

Building the finish screen

Skipping to the end

Testing on a mobile device

Object recognition from the camera

Detecting and recognizing objects on a stream

Connecting detection

Wrapping up the game flow

Summary

Part 4: Wrapping Up

10

Creating a Portfolio with Nuxt.js and Storyblok

Technical requirements

Setting up Storyblok

Initializing the Nuxt portfolio

Installing Nuxt modules

Working with multiple content types

Configuring the portfolio

Mapping content to code

Presenting the portfolio section

Modifying the content model

Updating existing types

Expanding the block properties

Mapping meta fields

Adding new features

Generating a standalone website

Publishing the static site

Automating the build and deployment on code change

Automating the build on content change

You made it!

Index

Other Books You May Enjoy

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.

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

A block of code is set as follows:

  list-style: none;

}

li {

  margin: 0.4rem 0;

}

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

v-on:click.prevent=updateItem(item)>{{ item.title }}

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 [email protected] 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