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

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