Vue.js Cheat Sheet

A quick reference to Vue.js directives, the Composition API, and single-file components for building reactive web interfaces.

2 PagesBeginnerMar 18, 2026

App Setup & Composition API

Creating a Vue app and using reactive primitives in a component.

javascript

import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')// Composition API inside a component's setup()import { ref, computed, onMounted } from 'vue'export default {  setup() {    const count = ref(0)              // reactive primitive, access via .value    const doubled = computed(() => count.value * 2)    function increment() {      count.value++    }    onMounted(() => console.log('component mounted'))    return { count, doubled, increment }  }}

Template Directives

Common directives for conditionals, loops, and binding.

html

<div v-if='isVisible'>Shown</div><div v-else>Hidden</div><li v-for='item in items' :key='item.id'>{{ item.name }}</li><img :src='imageUrl' :alt='altText' /><button @click='increment'>+1</button><input v-model='searchText' placeholder='Search' /><p v-show='isOnline'>Online</p>

Composition API Essentials

The core functions used to build reactive components.

ref- creates a reactive reference wrapping a value; read/write it through .value
reactive- creates a deeply reactive object; no .value needed to access its properties
computed- derives a cached value that only recalculates when its dependencies change
watch- explicitly observes one or more reactive sources and runs a callback on change
watchEffect- runs a function immediately and re-runs it whenever any reactive value it reads changes
onMounted- lifecycle hook that fires after the component has been mounted to the DOM
onUnmounted- lifecycle hook that fires when the component is removed from the DOM
provide / inject- pass data down the component tree without prop drilling through every level

Single File Component (script setup)

The modern SFC syntax using the <script setup> compiler sugar.

vue

<script setup>import { ref } from 'vue'const count = ref(0)</script><template>  <button @click='count++'>Count: {{ count }}</button></template><style scoped>button { padding: 8px 16px; }</style>

Pro Tip

Prefer <script setup> over the Options API for new components -- it compiles to less code and gives better TypeScript inference, but you still need to explicitly import ref, computed, and watch from vue.

Was this cheat sheet helpful?

Vector Databases for AI Cheat Sheet

Angular Cheat Sheet