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
Official Docs

Getting Started

Creating a Vue App

Initialize and mount a Vue application with both API styles

vue
💡 Vue 3 supports both Composition and Options API
📌 Use <script setup> for cleaner Composition API syntax
⚡ Single File Components combine template, logic, and styles
✅ Choose one API style per component for consistency

Template Syntax

Interpolation & Directives

Display data and use Vue directives in templates

vue
💡 Use v-if for conditional rendering, v-show for toggling visibility
⚡ Always use :key with v-for for efficient updates
📌 @ is shorthand for v-on, : is shorthand for v-bind
✅ v-model creates two-way binding for form inputs

Component Basics

Props

Pass data from parent to child components

vue
💡 Props are read-only in child components
⚠️ Use functions to return default values for objects/arrays
📌 Prop validation helps catch errors early
✅ Use TypeScript for better prop type safety

Events

Communicate from child to parent components using custom events

vue
💡 Use custom events for child-to-parent communication
📌 v-model is syntactic sugar for value prop and input event
⚡ Event validation helps catch errors during development
✅ Keep event names consistent with kebab-case in templates

Slots

Create flexible components with content distribution

vue
💡 Slots allow parent to inject content into child components
📌 Use scoped slots to pass data from child to parent template
⚡ Named slots provide multiple content outlets
✅ Check $slots to conditionally render wrapper elements

Reactivity

Composition API Reactivity

Create and manage reactive state with ref and reactive

vue
💡 Use ref for primitives, reactive for objects
📌 .value is needed in script, not in template
⚡ Computed properties are cached and only update when dependencies change
✅ watchEffect automatically tracks dependencies

Options API Reactivity

Manage reactive state with data, computed, and watch options

vue
💡 All data properties are automatically reactive
📌 Computed properties are cached based on dependencies
⚡ Use deep: true to watch nested object changes
✅ Methods are not cached, use computed for expensive operations

Lifecycle Hooks

Lifecycle Hooks

Hook into component lifecycle events in both API styles

vue
💡 Composition API hooks can be called multiple times
📌 mounted is when you can access DOM elements
⚠️ Always cleanup in unmounted to prevent memory leaks
✅ Use nextTick to wait for DOM updates

Composables & Mixins

Composables

Reusable logic with Composition API composables

javascript
💡 Composables are functions that leverage Vue Composition API
📌 Convention: composable names start with "use"
⚡ Composables can use other composables
✅ Extract reusable logic into composables

Mixins (Options API)

Share functionality between components with mixins

javascript
⚠️ Prefer Composition API composables over mixins
💡 Mixin properties can be overridden by component
📌 Multiple mixins are merged in array order
✅ Global mixins affect every component