Vue.js Cheatsheet — Complete Quick Reference (2026)

In this tutorial, you'll learn about Vue.js Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Vue.js is a progressive JavaScript framework for building user interfaces with a component-based architecture, reactive data binding, and an approachable learning curve.

Options API vs Composition API

<script>
// Options API
export default {
  data() { return { count: 0 } },
  methods: { inc() { this.count++ } },
  computed: { doubled() { return this.count * 2 } },
  watch: { count(val) { console.log(val) } },
}
</script>

<script setup>
// Composition API (recommended)
import { ref, computed, watch } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function inc() { count.value++ }
watch(count, (val) => console.log(val))
</script>

Directives

<!-- v-bind: bind attribute -->
<img v-bind:src="url" />
<img :src="url" />           <!-- shorthand -->

<!-- v-model: two-way binding -->
<input v-model="name" />
<input v-model.number="age" /><!-- modifier: .number, .trim, .lazy -->

<!-- v-if / v-else / v-show -->
<p v-if="visible">shown</p>
<p v-show="visible">toggled</p>

<!-- v-for -->
<li v-for="(item, i) in items" :key="item.id">{{ item.name }}</li>

<!-- v-on: event -->
<button v-on:click="handle">click</button>
<button @click="handle">click</button>
<button @click.prevent="submit">submit</button>  <!-- modifier: .prevent, .stop, .once -->

<!-- v-html (sanitize content before using!) -->
<div v-html="rawHtml"></div>

<!-- v-slot -->
<MyComp v-slot:default="{ item }">{{ item.name }}</MyComp>
<MyComp #default="{ item }">{{ item }}</MyComp>

Components & Props

<!-- Child.vue -->
<script setup>
defineProps<{ title: string; count?: number }>()
// or: const props = defineProps({ title: String, count: { type: Number, default: 0 } })
</script>
<template><h1>{{ title }}</h1></template>

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
</script>
<template><Child title="Hello" :count="5" /></template>

Emits

<script setup>
const emit = defineEmits<{ (e: 'update', id: number): void }>()
emit('update', 42)

// or: defineEmits(['update'])
</script>

Slots

<!-- MyCard.vue -->
<template>
  <div class="card">
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

<!-- usage -->
<MyCard>
  <template #header>Title</template>
  <p>Body content</p>
  <template #footer>Footer</template>
</MyCard>

Lifecycle Hooks (Composition API)

<script setup>
import { onMounted, onUnmounted, onUpdated, onBeforeMount } from 'vue'
onMounted(() => {})         // component mounted
onBeforeMount(() => {})     // before mount
onUpdated(() => {})          // reactive data changed
onUnmounted(() => {})       // component destroyed
onActivated(() => {})       // <KeepAlive> activated
</script>

Reactivity APIs

<script setup>
import { ref, reactive, computed, watch, provide, inject } from 'vue'

const count = ref(0)                // primitive ref
const state = reactive({ x: 1 })    // object reactive
const doubled = computed(() => count.value * 2)

watch(count, (nv, ov) => {})       // single ref
watch([count, () => state.x], ([c, x]) => {})  // multiple

provide('key', value)                // provide
const value = inject('key')          // inject
</script>

Pinia (State Management)

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function inc() { count.value++ }
  return { count, inc }
})

// component
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
store.inc()

Vue Router

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/', component: () => import('@/pages/Home.vue') },
  { path: '/about', component: () => import('@/pages/About.vue') },
  { path: '/post/:id', component: () => import('@/pages/Post.vue') },
]
export default createRouter({ history: createWebHistory(), routes })

// navigation
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
router.push('/about')
router.push({ name: 'post', params: { id: '123' } })

Must-Know Items

• ref() is for primitives; reactive() is for objects — ref() wraps in .value, reactive does not
• <script setup> is the modern standard — less boilerplate, better TypeScript inference
• v-for and v-if on the same element — v-if runs first; better to use <template> wrapper
• Computed values are cached; methods re-evaluate on every render
• watch is for side effects; computed is for derived state
• defineAsyncComponent enables Lazy Loading components
• <KeepAlive> caches component state when switching between views
• v-once renders once and skips future updates for static content

See full Vue.js tutorials for building reactive web applications.