Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router

✍ Scribed by Pablo David Garaguso

• Publisher: Packt Publishing
• Year: 2023
• Tongue: English
• Leaves: 296
• Category: Library

✦ Synopsis

Enhance your Vue 3 development skills to build high-performing single and progressive page applications with Vite, Pinia, and Web Workers

Purchase of the print or Kindle book includes a free PDF eBook

Key Features

• Learn software engineering best practices and design patterns and apply them effectively to your Vue applications
• Build both SPAs and PWAs using Web Workers and IndexedDB
• Develop, test, build, and deploy your Vue 3 applications to a real production server

Book Description

If you're familiar with the progressive Vue framework for creating responsive user interfaces, you'll be impressed with its latest iteration, Vue 3, which introduces new concepts and approaches design patterns that are uncommon in other libraries or frameworks. By building on your foundational knowledge of Vue 3 and software engineering principles, this book will enable you to evaluate the trade-offs of different approaches to building robust applications.

This book covers Vue 3 from the basics, including components and directives, and progressively moves on to more advanced topics such as routing, state management, web workers, and offline storage. Starting with a simple page, you'll gradually build a fully functional multithreaded, offline, and installable progressive web application.

By the time you finish reading this Vue book, not only will you have learned how to build applications, but you'll also understand how to solve common problems efficiently by applying existing design patterns. With this knowledge, you'll avoid reinventing the wheel for every project, saving time and creating software that's adaptable to future changes.

What you will learn

• Discover the full potential of the powerful and progressive Vue 3 framework
• Explore software principles and design patterns to build maintainable applications
• Create an efficient development environment using Vite and optimize your code and workflow
• Identify and apply proven design patterns to solve common problems in your web application's architecture
• Refactor your codebase to improve your application's organization, scalability, and maintainability
• Follow best practices for your code, organization, architecture, and user experience implementation

Who this book is for

This book is for Vue.js developers who are passionate about framework design principles and seek to apply commonly found design patterns to their web development projects. This book assumes prior knowledge of JavaScript and a basic understanding of Vue.js, making it an ideal resource for developers looking to expand their existing skillset.

Table of Contents

1. The Vue 3 Framework
2. Software Design Principles and Patterns
3. Setting Up a Working Project
4. User Interface Composition with Components
5. Single-Page Applications
6. Progressive Web Applications
7. Data Flow Management
8. Multithreading with Web Workers
9. Testing and Source Control
10. Deploying Your Application
11. Bonus Chapter - UX Patterns
12. Appendix

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Foreword
Contributors
Table of Contents
Preface
Chapter 1: The Vue 3 Framework
The progressive framework
Using Vue in your web application
The bundler way, a better way...
Understanding single-file components
Different strokes – options, composition, and script setup API
Exploring built-in directives in Vue 3
v-bind: (shorthand ":")
v-show
v-if, v-else, and v-else-if
v-for and :key
v-model
v-on: (and the shorthand @)
Built-in components
Book code conventions
Variables and props
Constants
Classes and component names
Functions, methods, events, and filenames
Instances
Summary
Review questions
Chapter 2: Software Design Principles and Patterns
What are the principles of software design?
A non-exclusive list of design principles
Separation of concerns
Composition over inheritance
Single responsibility principle
Encapsulation
KIC – keep it clean
DRY – don’t repeat yourself
KISS – keep it simple and short
Code for the next
What is a software design pattern?
A quick reference list of patterns
The singleton pattern
The dependency injection pattern
The factory pattern
The observer pattern
The command pattern
The proxy pattern
The decorator pattern
The façade pattern
The callback pattern
The promise pattern
Summary
Review questions
Chapter 3: Setting Up a Working Project
Technical requirements
Project setup and tools
Folder structure and modifications
Integration with CSS frameworks
The w3.css framework
FontAwesome is just awesome
Vite configuration options
The To-Do app
Summary
Review questions
Chapter 4: User Interface Composition with Components
Technical requirements
Page composition with components
Step 1 – identify layouts and user interface elements
Step 2 – identify relationships, the data flow, interactions, and events
Step 3 – identify user interactivity elements (inputs, dialogs, notifications, and more)
Step 4 – identify design patterns and trade-offs
Components in depth
Local and global components
Static, asynchronous, and dynamic imports
Props, events, and the v-model directive
Custom input controllers
Dependency injection with Provide and Inject
Special components
Slots, slots, and more slots...
Composables and mixins
Dynamic components with “component:is”
A real-world example – a modals plugin
Setting up our development project
The design
The implementation
Implementing our new To-Do application
A small critique of our new To-Do application
Summary
Review questions
Chapter 5: Single-Page Applications
Technical requirements
What is a SPA?
The Vue 3 router
Installation
A new To-Do application
Routes’ definition and the Router object
Router template components
Nested routes, named views, and programmatic navigation
Exploring authentication patterns
Simple username and password authentication
OpenID and third-party authentication
Passwordless or one-time password (OTP) authentication
2FA - Two Factors Authentication
Web3 authentication
Summary
Review questions
Chapter 6: Progressive Web Applications
Technical requirements
PWAs or installable SPAs
Upscaling a SPA into a PWA
The manifest file
Testing your manifest
Install prompt
Service workers
Vite-PWA plugin
Testing your PWA score with Google Lighthouse
Summary
Review questions
Chapter 7: Data Flow Management
Technical requirements
Components’ basic communication
Implementing an event bus with the Singleton and Observer patterns
Implementing a basic reactive state
Implementing a powerful reactive store with Pinia
Browser data stores – session, local, and IndexedDB
Experimenting with reactivity and Proxies patterns
Summary
Review questions
Chapter 8: Multithreading with Web Workers
Technical requirements
An introduction to web workers
Implementing a Web Worker
The business delegate pattern
The dispatcher pattern
Establishing a communication pipeline with the web worker
Accessing IndexedDB with DexieJS in the web worker
Consuming a RESTful API with the web worker
A simple NodeJS server for testing
Summary
Review questions
Chapter 9: Testing and Source Control
Technical requirements
What are testing and TDD
What to test
Our base example application
Installation and use of Vitest
Special assertion case – fail on purpose
Special assertion case – asynchronous code
Installation of Vue Test Utils
In-source testing
Coverage
The Vitest UI
What is source control... and why?
Source control with Git
Installation on Windows systems
Installation on Linux systems
Installation on macOS systems
Using Git
Managing branches and merges
Merging conflicts
Working with remote repositories
Continuous Integration and Delivery
Summary
Review questions
Chapter 10: Deploying Your Application
Technical requirements
What is involved in publishing a web application?
Domains, Domain Name Servers (DNS), and DNS records
Considerations for building our application for deployment
Web server options and configurations
Apache HTTP Server configuration
Nginx server configuration
Other servers
Transferring your files to the server
Protecting your web application with Let’s Encrypt
Summary
Review questions
Chapter 11: Bonus Chapter - UX Patterns
Technical requirements
UI design versus UX design
The principles of UI design
Sufficient contrast or distinction between elements
Stimulating repetition and being consistent
Be mindful of alignment and direction
Use proximity and distance to show natural groups
Laws for UI design
Common patterns for data manipulation
HTML input elements
Checkboxes, radios, and toggle switches
Chips, pills, or tags
Common patterns for data visualization
Tooltips
Notification dots, bubbles, marks, or badges
Toast notifications
Carousel or image sliders
Progress bars and spinners
Pagination and infinite scroller
Common patterns for interaction and navigation
Placement of menus
Breadcrumbs
Modal dialogs
Menu icons
Accordion menus
Mega menus
Drop-down menus
Common patterns for content organization
Responsive applications
Home link
Hero section, call to action, and social media icons
Other patterns
Dark patterns
Trick questions
Sneak into the basket
Roach motels
Privacy Zuckering
Preventing price comparison
Misdirection
Hidden costs
Bait and switch
Confirm shaming
Disguised ads
Friendly spam
Summary
Review questions
Appendix: Migrating from Vue 2
A different way to bootstrap and start the application
Register global components, plugins, and so on
The data property is now always a function
There are more reactive options to choose from
Changes to v-model, props, and events
Removed old browser compatibility
Changes in directory and file organization
Changes in the router and state management
New components and other changes
Other breaking changes
Summary
Final words
Index
Other Books You May Enjoy