Introduction
Welcome to VueYous!
In this book, you'll learn how to create composable functions by exploring VueUse, a collection of utility functions built on Vue.js's Composition API.
True to the name "chibi" (small), this book is designed to help you understand the mechanics of composable functions by recreating them with minimal code.
While we assume you have some basic knowledge of Vue.js, we've made sure that even those with limited experience can learn alongside us.
So, let's dive into the world of VueYous and create your own composable functions with the power of VueUse!
Our Approach
This book is built on three core pillars:
- Minimal Recreation: Rather than fully mimicking VueUse, we focus on understanding the essence of composable functions by building up small (Chibi) pieces of code.
- Clear Explanations: We break down complex concepts into understandable pieces, aiming to create those "AHA!" moments for you.
- Practical Examples: We emphasize making what you learn immediately useful in your everyday development. We focus not just on theory, but on practical problem-solving approaches and best practices.
Who This Book Is For
- You have some experience with Vue.js (preferred)
- You have some experience with TypeScript (preferred)
- You have the passion to understand things deeply
Book Structure
This book is still a work in progress. We're starting with VueUse's core features.
In the future, we plan to add add-ons and advanced topics.
Part 1: Core Section
Chapter 0: Introduction
Learn the fundamentals of VueUse, set up your development environment, and understand how to navigate the codebase. This chapter prepares you for the hands-on learning journey ahead.
Chapter 1: State (State Management)
Master reactive state management patterns. Build composables for counters, toggles, and persistent storage solutions using localStorage and sessionStorage. Learn to implement undo/redo functionality with state history tracking.
Chapter 2: Elements (DOM Element Manipulation)
Work directly with DOM elements through composables. Handle events, track element sizes and positions, and leverage powerful browser APIs like IntersectionObserver, ResizeObserver, and MutationObserver.
Chapter 3: Browser (Browser APIs)
Harness browser capabilities for responsive design and user preferences. Implement media queries, breakpoints, dark mode detection, clipboard operations, and control page metadata like title and favicon.
Chapter 4: Sensors (Sensors & Input Detection)
Capture user interactions and device inputs. Track mouse and pointer movements, detect clicks outside elements, handle keyboard shortcuts, and implement swipe gestures and drag-and-drop functionality.
Chapter 5: Network
Handle asynchronous operations and network communication. Build composables for fetching data, managing async state, and establishing real-time connections with WebSockets.
Chapter 6: Animation
Control timing and create smooth animations. Master intervals, timeouts, requestAnimationFrame, and state transitions to bring your interfaces to life.
Chapter 7: Component (Component Integration)
Enhance component communication and reusability. Implement two-way binding with v-model, manage template refs, and create reusable template patterns.
Chapter 8: Watch (Watch Extensions)
Extend Vue's reactivity system with advanced watching patterns. Implement debounced and throttled watchers, pausable watches, and convenient utilities like whenever and until.
Chapter 9: Reactivity (Reactivity Extensions)
Push Vue's reactivity further. Convert functions to reactive versions, synchronize refs, transform refs to reactive objects, and apply debouncing/throttling to reactive values.
Chapter 10: Array (Array Manipulation)
Work with reactive arrays elegantly. Implement composables for mapping, filtering, and finding array elements while maintaining reactivity.
Chapter 11: Utilities
Learn advanced patterns for composable design. Create shared composables, manage global state, handle async queues, and implement debounce and throttle utilities.
Conclusion
Reflect on what you've learned, explore more of the VueUse codebase, learn how to contribute to open source, and discover your next steps in mastering Vue composables.
Are you ready? Let's begin!