Vue.js Reference

Getting Started — what Vue is, the progressive framework, the SFC shape, the Options and Composition API styles, the ways of using Vue, and createApp / app.mount / app.config.

Template Syntax — text interpolation and v-html, attribute bindings with v-bind, directive arguments and modifiers, the : / @ / # shorthands, and dynamic class and style bindings.

Reactivity Fundamentals — ref() and reactive(), ref unwrapping and the reactive caveats, toRefs / toRef, nextTick, and how the track / trigger dependency system works under the hood.

Computed Properties — computed(), caching versus methods, writable computed with get / set, and computed versus watch.

Conditional and List Rendering — v-if / v-else / v-show, v-for over arrays, objects and ranges, the key requirement, and the v-if + v-for precedence trap.

Event Handling — v-on / @, inline versus method handlers, and the event, key and mouse-button modifiers.

Form Input Bindings — v-model on text, checkbox, radio and select inputs, what it desugars to, and the .lazy / .number / .trim modifiers.

Watchers — watch and watchEffect, deep / immediate / once, callback flush timing, and onWatcherCleanup.

Template Refs — useTemplateRef() and the ref attribute, refs in v-for, function refs, and component refs with defineExpose().

Lifecycle Hooks — the lifecycle diagram, registering hooks in setup, and the Options API equivalents.

Components Basics — defining and registering components, passing props, listening to events, a first look at slots, and dynamic components.

Registration and Props — global versus local registration, defineProps() runtime and type-based declaration, prop validation, one-way flow, and reactive props destructure.

Component Events and v-model — defineEmits() and declared events, defineModel(), v-model arguments and modifiers, and fallthrough attributes with $attrs and inheritAttrs.

Slots — default, named and scoped slots, the # shorthand, conditional and dynamic slot names, and the renderless component pattern.

Provide / inject — provide / inject, app-level provide, typed injection keys, and keeping provided values reactive.

Async Components — defineAsyncComponent, the loading and error states, and pairing with route-level code splitting and <Suspense>.

Composables — extracting stateful logic into use* functions, the conventions, side-effect cleanup, and composables versus mixins.

Custom Directives and Plugins — the directive hooks and binding object, and the plugin install contract with app.use().

Transitions and Animation — <Transition> and its classes and JavaScript hooks, <TransitionGroup> and move transitions, state-driven animation, GSAP, and route transitions.

KeepAlive, Teleport and Suspense — <KeepAlive> caching, <Teleport>, <Suspense>, and the special elements and attributes.

Single-File Components — the SFC blocks, <script setup> and its compiler macros, generics, and the scoped-CSS / CSS-Modules / v-bind() style features.

Tooling and Project Setup — create-vue and Vite, Vue Language Tools, eslint-plugin-vue, vue-tsc, and the Vue DevTools.

Routing — Vue Router setup, <RouterView> / <RouterLink>, dynamic and nested routes, navigation guards, and lazy-loaded route components.

State Management — the reactivity-API simple store and Pinia’s setup and option stores, state / getters / actions, and storeToRefs.

Testing — the testing pyramid, Vitest and Vue Test Utils, testing composables, router and Pinia, snapshot testing, and end-to-end tests with Cypress / Playwright.

Server-Side Rendering — CSR versus SSR versus SSG, createSSRApp and renderToString, hydration and mismatches, and Nuxt.

Vue with TypeScript — project setup, typing ref / reactive / computed, type-based defineProps / defineEmits / defineModel, typed template refs and injection keys, generic components, and the Options API side.

Rendering, Render Functions and Web Components — the virtual DOM and render pipeline, compiler-informed fast paths, h() and JSX, functional components, and defineCustomElement().

Performance and Deployment — profiling, page-load and update optimizations, production feature flags, error tracking, and worked deployments to Netlify and AWS.

Security and Accessibility — Vue’s HTML-escaping and the v-html risk, injection sinks, semantic templates, route-change focus management, and testing tools.

Style Guide and Best Practices — the official Style Guide priority levels, component-design guidance, and the Composition API rationale.

UI Component Libraries — how to style a Vue app and which ready-made component libraries to reach for, free and open-source first (Vuetify, PrimeVue, Element Plus, Naive UI, Quasar, Nuxt UI, Reka UI, …​), with commercial suites and accessibility last.

Cheat sheet — a one-page, downloadable PDF summary of the essentials above for quick memorization.