Vue.js Reference

The Vue.js Cheat Sheet Every Vue Dev Keeps Open

Every directive, Composition API pattern, lifecycle hook and Vue Router navigation option — organised by concept. Whether you're migrating from Vue 2 or learning the Composition API, stop tab-switching to the docs mid-component.

$9
One-time payment · Instant PDF download
📄 PDF format ⚡ Instant download 🖨️ Print-ready ♾️ Keep forever
vuejs-cheat-sheet.pdf
COMPOSITION API
const count = ref(0)Reactive ref
const state = reactive({})Reactive object
computed(() => x * 2)Computed value
DIRECTIVES
v-if="condition"Conditional render
v-for="item in list"List rendering
v-model="data"Two-way binding
LIFECYCLE
onMounted(() => {})After mount
onUpdated(() => {})After update
onUnmounted(() => {})Before destroy

What's inside the Vue.js Cheat Sheet

8 sections covering Vue 3 from template syntax and directives to Composition API, Vue Router and Pinia state management.

📄

Template Syntax & Directives

All of Vue's built-in directives with the correct syntax for every use case.

  • v-if, v-else-if, v-else, v-show
  • v-for with key, v-for with objects
  • v-bind (:) and v-on (@) shorthand
  • v-model modifiers (.lazy, .trim, .number)
⚙️

Options API (data/methods/computed/watch)

The classic Vue API — still valid and still used in millions of projects.

  • data(), methods and computed
  • watch and watchEffect
  • Filters and global properties
  • mixins (and why to avoid them)
🔧

Composition API (setup/ref/reactive)

The modern Vue 3 way — composables, ref, reactive, computed and watch all in one section.

  • setup() function and script setup
  • ref() vs reactive() — when to use each
  • computed() and watch()
  • Composables (use* functions)
🔌

Component Communication (props/emits/slots)

Pass data into and out of components correctly in every direction.

  • defineProps() with types and defaults
  • defineEmits() and emit pattern
  • Default slot and named slots
  • provide() and inject()
♻️

Lifecycle Hooks (Vue 3)

Every lifecycle hook with when to use it and what happens at each stage.

  • onBeforeMount, onMounted
  • onBeforeUpdate, onUpdated
  • onBeforeUnmount, onUnmounted
  • onErrorCaptured and onActivated
🗺️

Vue Router Navigation

Client-side routing with Vue Router — defining routes, navigation guards and params.

  • router-link and router-view
  • useRouter() and useRoute()
  • Route params, query and hash
  • Navigation guards (beforeEach)
🍍

Pinia State Management

The official Vue state management library — stores, actions and getters.

  • defineStore() — Options and Setup style
  • state, getters, and actions
  • Using stores in components
  • Persisting state with plugins

Built-in Transitions & Teleport

Animate component mounting and unmounting, and portal content anywhere in the DOM.

  • <Transition> and <TransitionGroup>
  • Enter/leave CSS class hooks
  • <Teleport> for modals and tooltips
  • <Suspense> for async components

Who this cheat sheet is for

  • Vue 2 developers migrating to Vue 3 and the Composition API
  • React developers learning Vue's directive system and template syntax
  • Frontend developers building Nuxt.js applications
  • Developers comparing Vue with React or Angular for a new project
  • Teams adopting Vue for enterprise projects who need a shared reference

What you get

📄
PDF file
High-resolution, print-ready PDF. Works on any device.
Instant access
Download immediately after purchase via Gumroad.
🖨️
Print-optimised
Designed to look perfect on A4 or US Letter paper.
♾️
Yours forever
One payment. No subscription. Download again any time.
Instant Download
$9
One-time payment · PDF · No subscription

Get the Vue.js Cheat Sheet now

Stop tab-switching to the Vue docs mid-component. Keep the complete reference open instead.

Buy on Gumroad →