Tutorials covering Vue.js from fundamentals through advanced patterns. Each chapter follows a consistent structure: intro prose, key point callout, motivation section, detailed walkthroughs with code, a complete example session, quick reference tables, best practices, common pitfalls, real-world examples, ASCII diagrams, and a summary. Topics include template syntax, attribute binding, event handling, conditional and list rendering, computed properties, watchers, component communication, slots, the Composition API, reactivity internals, lifecycle hooks, and ecosystem tooling like Vite, Vue Router, and Pinia. Every chapter uses real, verifiable code with no invented data, and each builds on the previous without cross-contaminating other framework series.
A parent component can reach into a child and call its methods or read its state by holding a template ref. In Vue 2, everything on the component instance was reachable by default. In Vue 3 with <script setup>, the script’s bindings are closed by default, and the parent sees an empty object unless the…
A Vue application ships as JavaScript. The larger the application, the larger the bundle, and the longer the initial load. A user who lands on the login page does not need the code for the settings panel, the admin dashboard, or the rich text editor. Loading all of it upfront wastes bandwidth and delays the…
A component that loads data asynchronously has three states: loading, loaded, and failed. The traditional way to handle these is a v-if chain: show a spinner while loading is true, show the content when data is present, and show an error when error is set. Every component repeats this pattern, and every parent repeats the…
A modal dialog has a layout problem. It needs to appear centered on the screen, above everything else, with a backdrop that covers the entire page. If the modal is rendered inside a deeply nested component, its parent’s CSS can interfere: an overflow: hidden, a transform, a z-index stacking context, or a position: relative ancestor….
A <Teleport> normally resolves its target the moment it mounts. If the target element does not exist yet, Vue logs a warning and renders nothing. This is a common problem when the target is rendered by the same component tree: a modal might teleport to a container that appears later in the template, or a…
A template usually names its components. <UserCard /> renders a UserCard, and that is the end of the story. But a tabbed interface does not know which panel to render until the user picks a tab. A plugin system loads components the application has never heard of. A wizard renders one step at a time…
Swapping one component for another destroys the first and creates the second. The destroyed component loses everything: the form the user was halfway through, the scroll position in a long list, the cursor in a text field, the fetched data that took a second to load. In a tabbed interface or a wizard, this is…
A component inside a <KeepAlive> does not unmount when it is hidden. It is deactivated. The onUnmounted hook does not fire, the component instance is not destroyed, and the state is preserved. But the component is no longer visible, and the work it was doing—timers, subscriptions, polling, animations—should stop. The onActivated and onDeactivated hooks are…
A Vue component is a function that returns a UI. A composable is a function that returns state and behavior, without the UI. The two are the same kind of thing, and the distinction is where the logic lives. When the logic is inside a component, it is bound to that component’s template. When the…
A composable that accepts a value has to decide what it accepts. A plain number, a ref, a computed, or a getter function: all four are reasonable, and all four appear in real code. A composable that only accepts one of them is rigid, and a composable that requires the caller to unwrap is annoying….