<script setup> | Script setup syntax |
ref(initialValue) | Reactive reference |
reactive(object) | Reactive object |
computed(() => value) | Computed property |
readonly(state) | Readonly state |
toRef(obj, "key") | Create ref from property |
toRefs(obj) | Convert to refs |
unref(ref) | Unwrap ref |
watch(source, callback) | Watch single source |
watch([a, b], ([a, b]) => {}) | Watch multiple |
watch(source, cb, { deep: true }) | Deep watch |
watch(source, cb, { immediate: true }) | Immediate watch |
watchEffect(() => {}) | Auto-tracking watch |
watchPostEffect(() => {}) | Post-flush watch |
onMounted(() => {}) | After mounted |
onUpdated(() => {}) | After update |
onUnmounted(() => {}) | Before unmount |
onBeforeMount(() => {}) | Before mount |
onBeforeUpdate(() => {}) | Before update |
onBeforeUnmount(() => {}) | Before unmount |
onErrorCaptured(() => {}) | Error captured |
v-bind:attr / :attr | Bind attribute |
v-on:event / @event | Event listener |
v-model | Two-way binding |
v-if / v-else-if / v-else | Conditional rendering |
v-show | Toggle visibility |
v-for="item in items" | List rendering |
v-for="(item, index) in items" | With index |
:key="item.id" | Unique key |
@click.prevent | Prevent default |
@click.stop | Stop propagation |
@submit.prevent | Prevent form submit |
@keyup.enter | Key modifier |
v-model.lazy | Sync on change |
v-model.number | Cast to number |
v-model.trim | Trim whitespace |
ref="element" | Template ref |
v-slot:name / #name | Named slot |
v-slot="{ data }" | Scoped slot |
:class="{ active: isActive }" | Conditional class |
:style="{ color: activeColor }" | Dynamic style |
v-html="rawHtml" | Raw HTML |
v-text="text" | Text content |
defineProps<{ title: string }>() | Define props (TS) |
defineProps({ title: String }) | Define props (JS) |
withDefaults(defineProps<>(), {}) | Props with defaults |
defineEmits<{ (e: "change"): void }>() | Define emits (TS) |
emit("eventName", payload) | Emit event |
v-model / defineModel() | Component v-model |
<slot /> | Default slot |
<slot name="header" /> | Named slot |
<slot :data="item" /> | Scoped slot |
<template #header> | Use named slot |
<template #default="{ item }"> | Use scoped slot |
$slots.default | Access slots |
provide("key", value) | Provide value |
provide("key", readonly(ref)) | Provide readonly |
const value = inject("key") | Inject value |
inject("key", defaultValue) | With default |
export function useFeature() { } | Create composable |
const { data, error } = useFeature() | Use composable |
return { state, methods } | Return reactive state |
nextTick(() => {}) | After DOM update |
getCurrentInstance() | Current component instance |
defineExpose({ }) | Expose to parent |
useSlots() | Access slots |
useAttrs() | Access attrs |
createRouter({ history, routes }) | Create router |
createWebHistory() | HTML5 history |
createWebHashHistory() | Hash mode |
{ path: "/", component: Home } | Route definition |
{ path: "/user/:id", ... } | Dynamic route |
{ path: "/:pathMatch(.*)*" } | Catch-all 404 |
<router-link to="/path"> | Navigation link |
<router-view /> | Route outlet |
useRouter() | Router instance |
useRoute() | Current route |
router.push("/path") | Navigate |
router.replace("/path") | Replace history |
router.go(-1) | Go back |
route.params.id | Route params |
router.beforeEach((to, from) => {}) | Global before guard |
router.afterEach((to, from) => {}) | Global after guard |
beforeEnter: (to, from) => {} | Per-route guard |
onBeforeRouteLeave((to, from) => {}) | Component leave guard |
onBeforeRouteUpdate((to, from) => {}) | Component update guard |
defineStore("name", { }) | Options store |
defineStore("name", () => { }) | Setup store |
state: () => ({ count: 0 }) | State |
getters: { double: (state) => state.count * 2 } | Getters |
actions: { increment() { this.count++ } } | Actions |
const store = useStore() | Get store instance |
store.count | Access state |
store.double | Access getter |
store.increment() | Call action |
storeToRefs(store) | Destructure reactively |
store.$reset() | Reset state |
store.$patch({ count: 10 }) | Patch state |