Vue.js v3.xBEGINNERVue.js Essentials
Complete Vue 3 guide covering Composition API, Options API, components, and reactivity
15 min read
vuecomposition-apioptions-apireactivecomponents
Table of Contents
Getting Started
Vue 3 setup and basics
Creating a Vue 3 App
Different ways to create Vue 3 applications
javascript
💡 Vue 3 is the current version, Vue 2 reached EOL in Dec 2023
⚡ Vite is the recommended build tool for Vue 3 projects
📌 Use create-vue for the best Vue 3 setup experience
🔥 CDN version is only for prototyping, not production
Vue 3 Composition API Setup
Script setup syntax (Vue 3 recommended way)
vue
💡 Script setup is the recommended syntax for Vue 3 Composition API
⚡ No need to return variables from setup() with script setup
📌 defineProps and defineEmits are compiler macros, no import needed
🔥 Vue 3 allows multiple root elements in templates
Directives
Vue built-in directives
Conditional Rendering
v-if, v-else, v-show directives
vue
💡 v-if removes/adds elements to DOM, v-show toggles CSS display
⚡ Use v-show for frequent toggling, v-if for rare changes
📌 In Vue 3, v-if has higher priority than v-for (opposite of Vue 2)
🔥 template tag renders no wrapper element, useful for grouping
List Rendering
v-for directive for rendering lists
vue
💡 Always use :key with v-for for efficient updates
⚡ Use stable, unique IDs for keys, not array indexes
📌 Vue 3 has full array reactivity, Vue 2 has limitations
🔥 v-for can iterate arrays, objects, ranges, and components
Event Handling & Input Binding
v-on (@) and v-model directives
vue
💡 @ is shorthand for v-on, : is shorthand for v-bind
⚡ Event modifiers can be chained: @click.stop.prevent
📌 v-model is two-way binding, equivalent to :value + @input
🔥 Vue 3 supports multiple v-model bindings on components
Attribute Binding
v-bind (:) directive and dynamic attributes
vue
💡 : is shorthand for v-bind, binds expressions to attributes
⚡ Class and style bindings merge with static values
📌 v-bind without argument binds entire object as attributes
🔥 Dynamic attribute names allow runtime attribute changes
Computed Properties & Watchers
Reactive computations and side effects
Computed Properties
Cached reactive computations
vue
💡 Computed properties are cached based on reactive dependencies
⚡ Use computed for expensive operations that depend on reactive data
📌 Computed properties are read-only by default, use get/set for writable
🔥 In Vue 3, computed returns a ref, access with .value in script
Watchers
Reacting to data changes with side effects
vue
💡 watchEffect runs immediately, watch runs only on change
⚡ Use deep: true to watch nested object changes
📌 watchEffect auto-tracks dependencies, watch is explicit
🔥 Return value from watch/watchEffect stops the watcher
Refs & Reactive State
Vue 3 reactivity system
Refs and Reactive
Creating reactive state in Vue 3
vue
💡 Use ref() for primitives, reactive() for objects in Vue 3
⚡ Refs auto-unwrap in templates, need .value in script
📌 toRefs() lets you destructure reactive objects without losing reactivity
🔥 Template refs give access to DOM elements or component instances
Component Communication
Props, events, and provide/inject
Props
Passing data to child components
vue
💡 Props are read-only, child should not mutate them
⚡ Use factory functions for object/array default values
📌 HTML attributes are case-insensitive, use kebab-case in templates
🔥 v-bind without argument passes all properties as props
Custom Events
Child to parent communication
vue
💡 Events bubble up from child to parent components
⚡ Event names should be kebab-case in templates
📌 Vue 3 allows event validation and multiple v-model
🔥 Use update:propName pattern for v-model compatibility
Provide/Inject
Dependency injection for deeply nested components
vue
💡 Provide/Inject allows passing data to deeply nested components
⚡ Injected values are not reactive in Vue 2 unless wrapped in function
📌 Use Symbol keys for type safety and avoiding collisions
🔥 Great for plugin systems and avoiding prop drilling
Forms & v-model
Form handling and two-way binding
Form Inputs
v-model with different input types
vue
💡 v-model creates two-way binding on form inputs
⚡ Use .number modifier for numeric inputs, .trim for strings
📌 Multiple checkboxes bind to array, single to boolean
🔥 File inputs don't support v-model, use @change event
Form Validation
Implementing form validation
vue
💡 Validate on blur for better UX, clear errors on input
⚡ Use computed properties for dynamic validation states
📌 Consider validation libraries like Vuelidate or VeeValidate
🔥 Always validate on both client and server side
Vue Router
Client-side routing in Vue
Router Setup
Setting up Vue Router
javascript
💡 Vue Router 4 for Vue 3, Vue Router 3 for Vue 2
⚡ Use lazy loading with import() for better performance
📌 History mode requires server configuration for production
🔥 Navigation guards control access to routes
Navigation
Navigating between routes
vue
💡 router-link renders as <a> tag with proper href
⚡ Use named routes to avoid hardcoding paths
📌 router.push adds to history, router.replace doesn't
🔥 Route params are strings, parse numbers when needed
State Management (Pinia)
Global state management with Pinia (Vue 3)
Pinia Store
Creating and using Pinia stores
javascript
💡 Pinia is the official state management for Vue 3
⚡ Setup syntax is more flexible but Option syntax is clearer
📌 Use storeToRefs() to destructure state with reactivity
🔥 Stores can use other stores and share logic easily
Lifecycle Hooks
Component lifecycle management
Vue 3 Lifecycle
Composition API lifecycle hooks
vue
💡 Setup runs before all lifecycle hooks in Composition API
⚡ Use mounted for DOM access, created/setup for data init
📌 Always cleanup in unmounted (timers, listeners, subscriptions)
🔥 Keep-alive hooks only work with <keep-alive> wrapper
Advanced Features
Vue 3 advanced features
Slots
Content distribution with slots
vue
💡 Slots enable flexible component composition
⚡ Scoped slots pass data from child to parent
📌 Use # as shorthand for v-slot:
🔥 $slots object contains all passed slots
Teleport & Suspense
Vue 3 Teleport and Suspense features
vue
💡 Teleport renders content outside component hierarchy
⚡ Suspense handles async component loading states
📌 Top-level await in setup makes component async
🔥 Combine Suspense with error boundaries for complete async handling
Composables
Reusable composition functions
javascript
💡 Composables extract and reuse stateful logic
⚡ Convention: composable names start with "use"
📌 Composables can only be called in setup or other composables
🔥 Return refs to maintain reactivity when destructuring
Transitions & Animations
Adding transitions and animations
Transition Component
Single element/component transitions
vue
💡 Vue 3 uses -from suffix instead of Vue 2's bare class names
⚡ Use mode="out-in" for smooth component transitions
📌 :css="false" for JavaScript-only transitions
🔥 TransitionGroup for animating lists with automatic move transitions