liminfoVue.js Reference
Free reference guide: Vue.js Reference
About Vue.js Reference
This Vue.js Reference is a complete, searchable cheat sheet for Vue 3 development, organized into six categories: Components, Composition API, Directives, State Management, Router, and Lifecycle. Each entry provides the syntax pattern alongside a working code example using the modern script setup with TypeScript, covering everything from Single File Component structure and defineProps/defineEmits to Pinia stores with storeToRefs and Vue Router navigation guards.
The Composition API section documents the reactive primitives that form the core of Vue 3: ref() for primitive values (requiring .value access), reactive() for objects, computed() for derived state, watch() and watchEffect() for side effects, and composables (custom hooks) for reusable stateful logic. The directives section covers template syntax essentials including v-if/v-else/v-show conditional rendering, v-for list rendering with :key binding, v-bind/v-on shorthand (: and @), v-model with modifiers (.number, .trim), and custom directives.
State management is covered through both Pinia (the official Vue store library) with defineStore using the Composition API syntax, storeToRefs for reactive destructuring, and the provide/inject API for dependency injection across deeply nested components. The Router section includes createRouter configuration, useRoute/useRouter composables, navigation guards with beforeEach, and RouterView/RouterLink component usage. This makes it a practical daily reference for frontend developers building Vue 3 applications.
Key Features
- Single File Component (SFC) structure with script setup lang="ts", template, and scoped style blocks explained
- Composition API primitives: ref vs reactive, computed properties, watch/watchEffect watchers, and composable patterns
- TypeScript-first props and emits: defineProps<T>() and defineEmits<T>() with full type inference examples
- Complete directive reference: v-if/v-else-if/v-else, v-show, v-for with :key, v-bind, v-on, v-model with modifiers
- Pinia store definition using Composition API style (defineStore with setup function) and storeToRefs for reactive access
- Vue Router configuration with createWebHistory, dynamic route params, useRoute/useRouter, and navigation guards
- Lifecycle hooks documentation: onMounted, onUpdated, onUnmounted, and nextTick for post-DOM-update execution
- Component v-model with defineModel<T>(), named slots with template #header syntax, and provide/inject for DI
Frequently Asked Questions
What is the difference between ref() and reactive() in Vue 3?
ref() wraps a value in a reactive reference object and works with any type (primitives, objects, arrays). You access the value via .value in script but not in templates. reactive() creates a deeply reactive proxy of an object and does not need .value, but it only works with objects (not primitives) and loses reactivity if destructured. Use ref() as the default choice; use reactive() when you have a group of related state values you want to access without .value.
How do I define typed props and emits with script setup?
Use defineProps<{ title: string; count?: number }>() for type-only props declaration with full TypeScript inference. For emits, use defineEmits<{ (e: "update", value: string): void; (e: "delete", id: number): void }>() to get type checking on both the emit call site and the parent listener. Both are compiler macros that do not need importing. You can also set default values with withDefaults(defineProps<Props>(), { count: 0 }).
When should I use watch() vs watchEffect()?
watch() explicitly specifies which reactive sources to observe and provides both old and new values in the callback, making it ideal for reacting to specific state changes or performing comparisons. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and runs immediately, which is convenient for side effects that depend on multiple reactive values. Use watch() when you need fine control; use watchEffect() for simpler reactive side effects.
How does Pinia differ from Vuex and why is it the recommended store?
Pinia is the official Vue store library that replaces Vuex. Key improvements include: no mutations (actions can directly modify state), full TypeScript support with automatic type inference, Composition API style stores using defineStore with ref/computed, modular by design without nested modules, and devtools integration. The Composition API syntax (setup function) is preferred over the Options API style for consistency with Vue 3 patterns.
What is the purpose of storeToRefs() in Pinia?
When you destructure a Pinia store directly, the reactive connection is broken and the values become plain non-reactive copies. storeToRefs() converts store state and getters into individual refs that maintain reactivity, so you can destructure them: const { count, doubled } = storeToRefs(store). Note that actions (methods) should be destructured directly from the store, not through storeToRefs, since they are just functions.
How do Vue Router navigation guards work?
Navigation guards intercept route transitions. The global guard router.beforeEach((to, from) => {...}) runs before every navigation. Return false to cancel, return a route object to redirect, or return nothing/true to proceed. Route-level guards use beforeEnter in route definitions. Component-level guards use onBeforeRouteLeave and onBeforeRouteUpdate composables. Guards are commonly used for authentication checks, role-based access, and data pre-fetching.
What are composables and how do I create one?
Composables are functions that encapsulate reusable stateful logic using the Composition API, similar to React hooks. They follow the "use" naming convention (e.g., useMouse, useFetch). Inside, you use ref(), computed(), onMounted(), etc. to create reactive state and lifecycle hooks, then return the reactive values. The key benefit is that composables can be shared across components without mixins or inheritance, and they compose cleanly since they are just function calls.
How does v-model work on custom components in Vue 3?
In Vue 3.4+, use defineModel<string>() in the child component to create a two-way binding. The parent uses <CustomInput v-model="name" />. Under the hood, this is equivalent to a prop named "modelValue" and an emit named "update:modelValue". You can have multiple v-models with named arguments: defineModel<number>("count") paired with <Component v-model:count="num" />. Each v-model can also have modifiers accessed via the second argument of defineModel.