Vue.js Reference

v-bind:attr="expr" or :attr="expr"

Dynamically bind an attribute or prop to an expression.

v-model="ref"

Two-way binding on form inputs, textareas, and custom components.

v-if="cond" v-else-if="cond" v-else

Conditionally render elements. Removes/adds DOM nodes.

v-show="expr"

Toggle visibility via CSS display — element stays in DOM.

v-for="(item, idx) in list" :key="item.id"

Render a list of items. Always provide a unique :key.

v-on:event="handler" or @event="handler"

Attach an event listener. Supports modifiers like .prevent, .stop, .once.

v-slot:name or #name

Define named and scoped slots for child component content.

v-html="rawHtml" v-text="str"

Set inner HTML or text content. v-html can cause XSS — sanitize input.

<script setup> or setup() { return {} }

Entry point for Composition API logic. script setup is the recommended form.

const x = ref(initialValue)

Create a reactive reference. Access value via .value in script, auto-unwrapped in templates.

const state = reactive({ key: value })

Create a deeply reactive object. No .value needed but cannot reassign the object itself.

const val = computed(() => expr)

Cached derived value that auto-updates when dependencies change.

watch(source, (newVal, oldVal) => { })

Run a side effect when a reactive source changes.

watchEffect(() => { /* uses reactive deps */ })

Immediately runs a function and re-runs it whenever its reactive dependencies change.

const r = toRef(reactiveObj, 'key')

Create a ref that is linked to a property of a reactive object.

const { a, b } = toRefs(reactiveObj)

Convert all properties of a reactive object to individual refs. Useful for destructuring.

const x = shallowRef(value)

Like ref but only the .value replacement is reactive — nested mutations are not tracked.

const ro = readonly(reactiveObj)

Create a read-only proxy of a reactive object. Mutations are rejected with a warning.

const val = unref(maybeRef)

Returns .value if the argument is a ref, otherwise returns the argument as-is.

isRef(val) / isReactive(val)

Type guards to check whether a value is a ref or reactive object.

onMounted(() => { })

Called after the component is mounted to the DOM. Safe to access DOM elements.

onUnmounted(() => { })

Called when the component is about to be destroyed. Clean up timers, listeners, subscriptions.

onUpdated(() => { })

Called after a reactive state change causes the component to re-render.

onBeforeMount(() => { })

Called right before the component is mounted. DOM is not available yet.

onErrorCaptured((err, instance, info) => { })

Called when an error from a descendant component is captured. Return false to stop propagation.

const props = defineProps<{ name: string }>()

Declare component props with TypeScript types. Compile-time only — no import needed in script setup.

const emit = defineEmits<{ (e: 'update', val: number): void }>()

Declare custom events the component can emit.

defineExpose({ method, ref })

Explicitly expose public properties for parent template ref access.

provide(key, value) / const val = inject(key)

Dependency injection across component tree — avoids prop drilling.

<Suspense> <template #default> ... </Suspense>

Display a fallback while async child components resolve.

<Teleport to="#target">...</Teleport>

Render child content at a different DOM location (e.g. modals to body).

createRouter({ history, routes })

Create a Vue Router instance with history mode and route definitions.

const router = useRouter() const route = useRoute()

Access the router instance and current route in Composition API.

<RouterView /> <RouterLink to="/path">

Render the matched route component and create navigation links.

router.beforeEach((to, from) => { })

Global guards that run before each navigation. Return false or a route to redirect.

{ path: '/', meta: { requiresAuth: true } }

Attach custom metadata to routes — accessible via route.meta.

defineStore('id', () => { })

Define a Pinia store using the Composition API syntax (setup stores).

const { prop } = storeToRefs(store)

Destructure store properties while keeping reactivity. Methods can be destructured directly.

store.$patch({ key: value }) or store.$patch(state => { })

Batch-update multiple store state properties in a single mutation.

store.$reset()

Reset the store state to its initial value (option stores only).

await nextTick()

Wait for the next DOM update flush. Useful when reading DOM after a state change.

defineAsyncComponent(() => import('./Comp.vue'))

Lazy-load a component — only fetched when first rendered.

h(tag, props, children)

Programmatically create vnodes — the JSX/hyperscript alternative to templates.

const el = useTemplateRef('name')

Type-safe template ref access (Vue 3.5+). Replaces the ref() + template ref pattern.