Vue.js 3 Design Patterns and Best Practices

Vue.js 3 Design Patterns and Best Practices

by Pablo David Garaguso
Released May 2023
Publisher(s): Packt Publishing
ISBN: 9781803238074

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Start or migrate to the new Vue 3 ecosystem, and learn to use Vite, Pinia, Web Workers, and other techniques to develop Single and Progressive Page Applications on solid ground

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

  • 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.

Table of contents

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

Product information

  • Title: Vue.js 3 Design Patterns and Best Practices
  • Author(s): Pablo David Garaguso
  • Release date: May 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803238074