Back to Home
Vue.js logoVue.js v3.xBEGINNER

Vue.js Essentials

Complete Vue 3 guide covering Composition API, Options API, components, and reactivity

15 min read
vuecomposition-apioptions-apireactivecomponents

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