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

Cover Page....2

Table of Contents....3

Preface....4

Chapter 1: The Vue 3 Framework....13

The progressive framework....14

Using Vue in your web application....17

Understanding single-file components....20

Different strokes – options, composition, and script setup API....22

Exploring built-in directives in Vue 3....26

Built-in components....29

Book code conventions....31

Summary....33

Review questions....34

Chapter 2: Software Design Principles and Patterns....35

What are the principles of software design?....36

A non-exclusive list of design principles....36

What is a software design pattern?....44

A quick reference list of patterns....45

Summary....76

Review questions....76

Chapter 3: Setting Up a Working Project....77

Technical requirements....77

Project setup and tools....79

Folder structure and modifications....82

Integration with CSS frameworks....86

FontAwesome is just awesome....88

Vite configuration options....90

The To-Do app....92

Summary....101

Review questions....102

Chapter 4: User Interface Composition with Components....103

Technical requirements....104

Page composition with components....104

Components in depth....110

Special components....119

A real-world example – a modals plugin....126

Implementing our new To-Do application....133

A small critique of our new To-Do application....136

Summary....136

Review questions....137

Chapter 5: Single-Page Applications....138

Technical requirements....138

What is a SPA?....139

The Vue 3 router....141

Exploring authentication patterns....157

Summary....175

Review questions....175

Chapter 6: Progressive Web Applications....177

Technical requirements....177

PWAs or installable SPAs....178

Upscaling a SPA into a PWA....181

Service workers....189

Vite-PWA plugin....192

Testing your PWA score with Google Lighthouse....193

Summary....195

Review questions....195

Chapter 7: Data Flow Management....197

Technical requirements....197

Components’ basic communication....198

Implementing an event bus with the Singleton and Observer patterns....201

Implementing a basic reactive state....204

Implementing a powerful reactive store with Pinia....207

Browser data stores – session, local, and IndexedDB....213

Experimenting with reactivity and Proxies patterns....216

Summary....219

Review questions....219

Chapter 8: Multithreading with Web Workers....221

Technical requirements....221

An introduction to web workers....222

The business delegate pattern....228

The dispatcher pattern....230

Establishing a communication pipeline with the web worker....230

Accessing IndexedDB with DexieJS in the web worker....236

Consuming a RESTful API with the web worker....241

A simple NodeJS server for testing....245

Summary....247

Review questions....248

Chapter 9: Testing and Source Control....249

Technical requirements....250

What are testing and TDD....250

What to test....251

Our base example application....253

Installation and use of Vitest....254

Installation of Vue Test Utils....260

In-source testing....264

Coverage....265

The Vitest UI....267

What is source control... and why?....268

Source control with Git....269

Continuous Integration and Delivery....279

Summary....280

Review questions....280

Chapter 10: Deploying Your Application....281

Technical requirements....281

What is involved in publishing a web application?....281

Considerations for building our application for deployment....285

Web server options and configurations....287

Transferring your files to the server....291

Protecting your web application with Let’s Encrypt....292

Summary....294

Review questions....295

Chapter 11: Bonus Chapter - UX Patterns....296

Technical requirements....296

UI design versus UX design....297

The principles of UI design....298

Common patterns for data manipulation....306

Common patterns for data visualization....308

Common patterns for interaction and navigation....317

Common patterns for content organization....323

Dark patterns....328

Summary....333

Review questions....333

Final words....335

Where to go from here....336

Finally.......336

Index....337

Why subscribe?....367

Other Books You May Enjoy....368

Packt is searching for authors like you....372

Share Your Thoughts....372

Download a free PDF copy of this book....374

Appendix: Migrating from Vue 2....376

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

• What is the Vue 3 progressive framework
• What are software principles and design patterns, how and when to implement them, and the trade-offs to consider
• Setup your development environment using the new Vite bundler
• Integrate in your applications state management, routing, multithreading, offline storage, and other resources provided to you by the browser, seldom taken advantage
• Apply and identify design patterns to solve common problems in the architecture of your web application
• Best practices for your code, organization, architecture, and user experience implementation
• Incrementally expand an application with new functionalities without re-writing the whole application each time

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.