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.
Vue.js is a progressive JavaScript framework for building user interfaces. The word “progressive” is not marketing language; it describes an architectural property that few other mainstream frameworks have in quite the same way. Vue can be added to an existing HTML page as a single script tag without a build step, or it can power…
Vue 3 projects are scaffolded with create-vue, the official project generator, which produces a Vite-powered workspace with the options you select: TypeScript, JSX, Vue Router, Pinia, Vitest, end-to-end testing, ESLint, and Prettier. The generator replaced the older Vue CLI, which was webpack-based and has since been deprecated. Understanding the generated structure is the first step…
Every Vue 3 application begins with createApp. The function takes a root component and returns an application instance, which is the object that holds the application’s configuration, plugins, and global state. The instance is not mounted yet; it exists independently until mount is called with a DOM selector. This separation between creating and mounting is…
Vue 3 ships with two ways to write components: the Options API and the Composition API. The Options API organizes a component by option type: data, methods, computed, watch, and lifecycle hooks each get their own section. The Composition API organizes a component by logical concern: everything related to a feature lives together in a…
Vue templates are HTML with a small set of additions. The most fundamental of those additions is the mustache binding, written as double curly braces. Everything else in the template syntax — directives, modifiers, shorthand — builds on the same idea: the template declares what the UI should look like as a function of the…
Vue templates are not just static HTML. The framework’s core promise is reactivity: when your data changes, the page updates. But displaying dynamic text with {{ }} only covers part of the story. What about attributes like src, href, disabled, or class? You cannot use mustache interpolation inside an attribute value—<img src=”{{ imageUrl }}”> will…
Not every part of a user interface should appear all the time. A loading spinner shows only while data fetches. An error message appears only after something fails. An admin panel renders only for users with the right permissions. Vue handles all of these cases through its conditional rendering system, a set of directives that…
Hiding an element is not the same as removing it. This distinction, simple as it sounds, sits at the heart of one of Vue’s most consequential architectural choices. Two directives—v-if and v-show—both make elements appear and disappear from the user’s view. But underneath that superficial similarity, they do fundamentally different things to the DOM, to…
Arrays are the backbone of most data-driven interfaces. A list of users, a set of products, a collection of comments—rendering these collections is one of the most common tasks in any application. Vue’s v-for directive exists to make this task declarative and reactive, but it comes with a subtlety that trips up even experienced developers:…
Interfaces are not passive. Users click, type, hover, scroll, and submit. Every meaningful interaction produces a DOM event, and every application must respond to those events somehow. Vue’s approach to event handling is declarative: instead of querying elements and calling addEventListener manually, you attach behavior directly in the template using the v-on directive. The result…