Home/Courses/Vue/Vue Foundations

Vue Foundations💚

Beginner→Intermediate

Vue 3.5

Master Vue.js 3 from the ground up. Learn the fundamentals of building modern, reactive user interfaces using Vue's Composition API, template syntax, reactivity system, and component architecture.

6

Sections

24

Lessons

26

Challenges

Start this free course

Start learning Vue Foundations

24 lessons and 26 challenges, all 100% free.

Start this course

What is Vue.js?

Setting Up Your Development Environment

Creating Your First Vue Project

Understanding Single-File Components

Vue's Progressive Philosophy(Sign in required)

Beginner+10 Mana

Single-File Component Structure(Sign in required)

Beginner+10 Mana

Creating a Vue Application(Sign in required)

Beginner+10 Mana

Scoped Styles Purpose(Sign in required)

Beginner+10 Mana

Text Interpolation and Expressions

Attribute Bindings with v-bind

Conditional Rendering with v-if and v-show

List Rendering with v-for

Mustache Syntax(Sign in required)

Beginner+10 Mana

Attribute Binding Shorthand(Sign in required)

Beginner+10 Mana

v-if vs v-show Behavior(Sign in required)

Beginner+10 Mana

The key Attribute in v-for(Sign in required)

Beginner+10 Mana

V For Output(Sign in required)

Beginner+10 Mana

Understanding ref() for Reactive State

Reactive Objects with reactive()

Computed Properties for Derived State

Introduction to Watchers

Accessing ref Values(Sign in required)

Beginner+10 Mana

Refs in Templates(Sign in required)

Beginner+10 Mana

Computed vs Methods(Sign in required)

Beginner+10 Mana

When to Use Watchers(Sign in required)

Intermediate+15 Mana

Event Handling with v-on

Event Modifiers

Form Input Bindings with v-model

Building Complete Forms

Event Listener Shorthand(Sign in required)

Beginner+10 Mana

Preventing Form Submission(Sign in required)

Beginner+10 Mana

V Model Purpose(Sign in required)

Beginner+10 Mana

V Model Number(Sign in required)

Beginner+10 Mana

Creating and Using Components

Passing Data with Props

Emitting Events to Parents

Component Lifecycle Hooks

Component Import(Sign in required)

Beginner+10 Mana

Props Mutation(Sign in required)

Beginner+10 Mana

Emit Events(Sign in required)

Beginner+10 Mana

Onmounted Purpose(Sign in required)

Beginner+10 Mana

Cleanup Hook(Sign in required)

Beginner+10 Mana

Project Organization Best Practices

Building a Complete Todo Application

Debugging with Vue DevTools

Next Steps in Your Vue Journey

Component Naming Convention(Sign in required)

Beginner+10 Mana

Import Path Alias(Sign in required)

Beginner+10 Mana

Composable Purpose(Sign in required)

Intermediate+15 Mana

Vue DevTools Feature(Sign in required)

Beginner+10 Mana

Ready to start this free course?

No credit card required.

Start this course now

Ready to start Vue Foundations?

24 interactive lessons and 26 hands-on challenges — learn in VS Code, Cursor, or the web.