Vue tips

5 tips · newest first

Atomic Vue 3 tips covering the Composition API, reactivity gotchas, SSR safety, and the newest 3.5 APIs — each one a snippet you can apply in minutes.

RSS

Replace modelValue/update boilerplate with defineModel() for v-model

VUE

defineModel() returns a writable ref wired to the parent's v-model, collapsing the modelValue prop plus update:modelVal…

v-modelcomponents

@hnooz

Cancel stale async work in watchers with onWatcherCleanup()

VUE

Registered inside the watcher callback, onWatcherCleanup runs before the next invocation and on stop. It removes the ma…

watchersasync

@hnooz

Destructure props with native defaults in Vue 3.5, but pass a getter to watch

VUE

Stabilized in 3.5: destructured variables from defineProps compile to props.count on access, so they stay reactive and…

propsreactivity

@hnooz

Generate hydration-safe unique IDs with useId() for accessibility

VUE

useId() produces IDs that are stable and identical across server render and client hydration, so label/for and aria-des…

ssraccessibility

@hnooz

Use useTemplateRef() for typed template refs instead of string-matched refs

VUE

Vue 3.5 resolves template refs by key at runtime, so the type is inferred and you drop the ref(null) declaration that h…

composition-apirefs

@hnooz