Vue.js Cheat Sheet
|
This section documents the current Vue 3.x release line as published at
the official Vue.js documentation, which is the reference these pages are written and
verified against. No specific patch version is pinned. The Composition API with This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Vue and its ecosystem iterate quickly. This section’s bibliography lists the reference material consulted while preparing these pages. |
A single-page, colour-coded summary of the Vue 3 essentials — the create-vue scaffold and the
<script setup> SFC skeleton, the reactivity primitives (ref / reactive / computed / readonly /
toRefs) and the watcher APIs, template syntax and the built-in directives, v-model on form controls and on
components, the lifecycle hooks, the <script setup> component API (defineProps with validation,
defineEmits, defineModel, defineExpose, useTemplateRef), slots and provide / inject, the built-in
components (<Transition> / <TransitionGroup> / <KeepAlive> / <Teleport> / <Suspense>),
defineAsyncComponent, Vue Router, Pinia, a Vitest + Vue Test Utils test skeleton, the SSR one-liner, and a
short Options-API-to-Composition-API map — handy for quick memorization or as a printable desk reference.
For the full explanation, every option, and additional examples, see the dedicated pages:
Essentials — Getting Started, Template Syntax, Reactivity Fundamentals, Computed Properties, Conditional and List Rendering, Event Handling, Form Input Bindings, Watchers, Template Refs, Lifecycle Hooks, and Components Basics.
Components in depth — Registration and Props, Component Events and v-model, Slots, Provide / inject, and Async Components.
Reusability — Composables and Custom Directives and Plugins.
Built-in components and animation — Transitions and Animation and KeepAlive, Teleport and Suspense.
Scaling up — Single-File Components, Tooling and Project Setup, Routing, State Management, Testing, and Server-Side Rendering.
TypeScript — Vue with TypeScript.
Under the hood — Rendering, Render Functions and Web Components.
Best practices — Performance and Deployment, Security and Accessibility, Style Guide and Best Practices, and UI Component Libraries.
The official Vue API reference and Quick Start cover the same ground in full, and the SFC Playground is the fastest way to try any snippet.