PROWIDIT Education Academy

Blog
About us
How it works
FAQ

+994 77 333 38 36 Trial lesson Account

AZ RU EN

← Back to account

Switch courseVue.js course

AI for developers course104
Algorithms and data structures course129
Django & FastAPI course140
Docker & deployment course103
Full Stack Developer course270
Git & GitHub course103
HTML & CSS course154
JavaScript course169
Laravel course136
Provider Networks: MPLS, BGP and BNG81
Next.js course113
Node.js course123
PHP course144
Python course153
React course122
SQL & databases course122
TypeScript course112
Vue.js course111

Getting Started with Vue
What Vue Is and Why Use It Free
Creating a Project with create-vue and Vite
Project Structure and Entry Point: createApp and mount
Single-File Components: template, script setup and style
Developer Tools: VS Code, Vue DevTools, ESLint and Prettier
Template Syntax and Directives
Interpolation and JavaScript Expressions in Templates
Directives: Syntax, Arguments, Modifiers and Shorthands
v-bind: Binding Attributes and Properties
Conditional Rendering: v-if, v-else-if, v-else and v-show
v-for: Rendering Arrays, Objects and Ranges
The key Attribute and How Vue Updates Lists
Special Directives: v-html, v-text, v-once, v-pre and v-cloak
Reactivity
ref: Reactive Values and .value
reactive: Reactive Objects and When to Choose ref
How Reactivity Works: Proxy, track and trigger
Reactivity Pitfalls: Destructuring, toRef and toRefs
shallowRef, readonly, markRaw and toRaw
computed: Computed Properties and Caching
Filtering, Searching and Sorting Lists with computed
watch: Watching Changes and Its Options
watchEffect and Side-Effect Cleanup
Project: Quiz App
Styles, Events and Forms
Dynamic Classes: Object and Array Syntax
Dynamic Inline Styles and CSS Variables
Styles in SFCs: scoped, :deep, CSS Modules and v-bind in CSS
Event Handling: v-on, Methods and Inline Handlers
Event Modifiers: .prevent, .stop, .once and More
Key and Mouse Modifiers: .enter, .esc, .ctrl, .exact
v-model: Two-Way Binding for Text Inputs and Modifiers
v-model for Checkbox, Radio and Select
Form Submission and Simple Manual Validation
Project: Todo App
Components: Fundamentals
Components: Creating, Registering and Organizing
Props: Passing Data to Components with defineProps
Props Validation: Types, required, default and validator
Component Events: defineEmits and Passing Data Up
v-model on Components: defineModel
defineModel: Multiple v-models, Arguments and Custom Modifiers
Fallthrough Attributes: $attrs, inheritAttrs and useAttrs
Slots: Default Slot, Named Slots and Fallback Content
Scoped Slots and Renderless Components
Project: Product Catalog with Filters
Lifecycle, DOM and Animations
Lifecycle Hooks: onMounted, onUpdated, onUnmounted
Template Refs: useTemplateRef and ref in Templates
Component Refs and defineExpose
nextTick and Asynchronous DOM Updates
Custom Directives
Transition: CSS Transitions and Enter/Leave Animations
Transition Modes, appear and JavaScript Hooks
TransitionGroup: Animating Lists
Advanced Components
provide and inject: Passing Data Down the Component Tree
Dynamic Components with <component :is>
KeepAlive: Caching Components
Async Components: defineAsyncComponent and Suspense
Teleport: Modals and Overlays
Render Functions and h(): When Templates Aren't Enough
Options API Compared to Composition API
Project: Mini UI Kit — Modal, Tabs and Accordion
Composables, VueUse and Plugins
Composables: Extracting Logic from Components
Composables with Reactive Arguments: toValue and MaybeRefOrGetter
VueUse: State, Storage and Browser APIs
VueUse: Elements, Events, Debounce and Throttle
Vue Plugins: app.use and Writing Your Own
UI Libraries Overview: Vuetify, PrimeVue, Element Plus and More
Project: Toast Notification Plugin with a useToast Composable
HTTP Requests and Working with APIs
Fetching Data: loading, error and data States
Axios: Client Instances, Interceptors and Error Handling
API Layer and Environment Variables: .env and import.meta.env
Building useFetch: Async Composables, Cancellation and Race Conditions
Project: Weather App with an External API
Routing with Vue Router
Vue Router: Setup, First Routes and RouterView
Navigation: RouterLink, Active Links and router.push
Dynamic Routes: Params, Props and the 404 Page
Query Parameters: Keeping Filter and Pagination State in the URL
Nested Routes, Layouts and Named Views
Navigation Guards: beforeEach, beforeEnter and In-Component Guards
Protecting Routes: meta, Authentication and Redirect After Login
Lazy-Loaded Routes, scrollBehavior and Page Transitions
Project: Multi-Page App with Authentication
State Management with Pinia
Pinia: Why a Store and Your First Store
Pinia State: Reading, Updating, $patch and storeToRefs
Pinia Getters: Derived State
Pinia Actions: Synchronous and Asynchronous Logic
Pinia Beyond Components: Store Composition and Router Guards
Pinia Plugins and State Persistence (persistedstate)
Project: Online Store with a Pinia Shopping Cart
TypeScript and Form Validation
TypeScript in Vue: Project Setup and vue-tsc
Typing props, emits and defineModel
Typing ref, reactive, computed, Events and Template Refs
Typing provide/inject and Composables
Generic Components and Typed Slots
Typing API Responses, Vue Router and Pinia
VeeValidate: useForm, defineField and Error Messages
Zod Validation Schemas with VeeValidate
Complex Forms: Field Arrays, Async Validation and Server Errors
Project: Typed Multi-Step Registration Form
Performance and Testing
Error Handling: errorHandler, onErrorCaptured and Monitoring
Rendering Performance: Extra Updates, v-memo and Large Lists
Load Optimization: Bundle Size, Code Splitting and Images
Vitest: Unit Testing Basics
Vue Test Utils: Mounting Components and Asserting Output
Testing Events, Emits and Forms
Testing Async Code, Pinia and Vue Router
Project: Adding Tests to the Online Store
Build, Deployment and Nuxt
Production Build: vite build, Modes and Vite Configuration
Deploying an SPA: Netlify, Vercel, GitHub Pages and nginx
Nuxt: Why Use It, Creating a Project and Its Structure
Nuxt: File-Based Routing, Layouts and Middleware
Nuxt Data Fetching: useFetch, useAsyncData and server/api
Nuxt: Rendering Modes, SEO and Deployment
Final Project: A Full-Featured Vue Application

Vue.js course · Lifecycle, DOM and Animations

Custom Directives

🔒 This is the beginning of the lesson. The full lesson is available with a subscription.

Create account Log in

← Previous lesson🔒 nextTick and Asynchronous DOM Updates Next lesson →🔒 Transition: CSS Transitions and Enter/Leave Animations

PROWIDIT Education Academy

Online programming courses in Baku. Live lessons in Azerbaijani and Russian, 80% practice, mentor support and job placement assistance.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Algorithms Django & FastAPI Node.js Full Stack

Tools & AI

Git & GitHub Docker & deployment AI for developers

Useful links

Free trial lesson Mentoring & interviews For companies Blog FAQ

Contacts

+994 77 333 38 36 info@prowid.com Video lessons Send a request

© 2021–2026 Prowid — IT Education Academy. All rights reserved. Baku, Azerbaijan