VUE

Vue Cheatsheet

Vue 3 syntax - Composition API, template directives, and single-file component structure.

Composition API

const x = ref(0)

Reactive primitive value

const obj = reactive({})

Reactive object

const y = computed(() => x.value * 2)

Derived reactive value

watch(x, (val) => {})

React to a value changing

onMounted(() => {})

Lifecycle hook - after mount

v-if="condition"

Conditionally render an element

v-for="item in items" :key="item.id"

Render a list

v-model="value"

Two-way data binding

v-bind:href="url" (or :href)

Bind an attribute

v-on:click="fn" (or @click)

Bind an event handler

v-show="condition"

Toggle visibility via CSS

<script setup>

Compile-time Composition API syntax sugar

defineProps({ name: String })

Declare component props

defineEmits(["update"])

Declare emitted events

<template>...</template>

Component markup block