How do you use v-model with a custom Vue 3 component?

By default, the component accepts a modelValue prop and emits an update:modelValue event when the value changes.

What does Vite hot module replacement do in a Vue 3 project?

It updates changed modules in the browser instantly during development while preserving application state when possible.

How are computed values defined in a Pinia store?

Use the getters section of a Pinia store for computed-like values, such as filtered data or a remaining-item count.

Free Course Image Vue 3 Step-by-Step Course: Components, Composition API, Vite and Pinia

Free online course Vue 3 Step-by-Step Course: Components, Composition API, Vite and Pinia

Duration of the online course: 4 hours and 43 minutes

New

Build modern Vue 3 apps faster with components, Composition API, Vite and Pinia. Take this free course and level up your frontend skills with practice.

In this free course, learn about

Vue 3 basics: templates, reactive state, and using directives in the view
Two-way binding with v-model for inputs and custom components
Attribute binding and event handling with : (v-bind) and @ (v-on) shorthand
Rendering lists/conditionals; using :key for stable updates; computed properties
Component fundamentals: single-file components, exports, props, defaults, slots
Passing non-strings to props (e.g., computed arrays) using v-bind syntax
Form handling: submit events and preventing page refresh with modifiers
Parent-child communication: props down, events up; emitting tag changes to parent
Lifecycle hooks for data fetching (e.g., created/before mount) and async updates
Reusable components with default/named slots and conditional slot rendering
Vite dev workflow: Hot Module Replacement for fast feedback while coding
Composition API: ref() for reactivity, script setup, defineProps/defineEmits
Composables: extracting reusable logic; watch/watchEffect for localStorage sync
State management: provide/inject, external reactive stores, and Pinia getters

About the free online course

If you want to build modern, maintainable web interfaces, Vue 3 is one of the most practical ways to get there. This free online course guides you from the very first Vue fundamentals to the patterns developers rely on in real projects, helping you move beyond copy-pasting snippets and toward confidently designing your own app structure.

You’ll start by learning how Vue thinks: reactive state, data binding with directives, event handling, and the everyday building blocks that make forms and UI interactions feel effortless. As you progress, you’ll shift from small examples to a cleaner, component-based mindset, learning how to split your interface into reusable parts, pass data with props, and keep parent and child components aligned without turning your code into a tangled mess.

From there, you’ll deepen your understanding of productivity-focused features that make Vue stand out. You’ll work with computed properties for derived values, manage lists and conditionals the right way, and use keys to keep rendering predictable and efficient. You’ll also explore how slots unlock flexible component design, letting you create reusable UI pieces while still customizing content where you need it.

Once the foundation is solid, the course transitions into Vue 3’s Composition API and script setup, showing you how to build more scalable logic with refs and composables. You’ll see why some values update automatically and others don’t, how to structure reusable logic that can be shared across components, and how to react to changes over time using the right reactive tools.

To round out a workflow that matches modern frontend development, you’ll use Vite for a smoother developer experience with rapid feedback, then step into application-wide state management with Pinia. Instead of scattering shared data across components, you’ll learn to centralize state, create computed-like store values, and build a more reliable architecture for features like dashboards, counters, and shared app data. Along the way, short exercises reinforce key concepts so you’re not just watching, but actively building confidence you can apply immediately to your own Vue projects.

Course content

Video class: Learn Vue 3 - Ep 1, The Absolute Basics 07m
Exercise: In Vue 3, what does the v-model directive do for an input field?
Video class: Learn Vue 3 - Ep 2, Attribute Binding and Event Handling 08m
Exercise: In Vue, what is the shorthand syntax for binding an attribute (like class) to an expression instead of a string?
Video class: Learn Vue 3 - Ep 3, Lists, Conditionals, and Computed Properties 14m
Exercise: When rendering a list with v-for, what is the main purpose of adding a unique :key?

Video class: Learn Vue 3 - Ep 4, Your First Vue Component 08m
Exercise: How can a child component display content passed between its opening and closing tags?
Video class: Learn Vue 3 - Ep 5, One Vue Component Per File 04m
Exercise: After moving a Vue component into its own file, what must you add so it can be imported elsewhere?
Video class: Learn Vue 3 - Ep 6, Component Props 08m
Exercise: How can a Vue component prop be given a default value while still allowing it to be overridden?
Video class: Learn Vue 3 - Ep 7, Bring it All Together 15m
Exercise: When using an AssignmentList component, how should you pass a computed array (not a string) into its assignments prop?
Video class: Learn Vue 3 - Ep 8, Handle a Form Submission 09m
Exercise: How can you prevent a form submission from refreshing the page in Vue?
Video class: Learn Vue 3 - Ep 9, Parent-Child State Communication 06m
Exercise: What is the common Vue pattern for communication between a parent component and a child component?
Video class: Learn Vue 3 - Ep 10, It's All So Easy 11m
Exercise: How can you generate a unique list of tag names from an assignments array in Vue?
Video class: Learn Vue 3 - Ep 11, Component Responsibility 08m
Exercise: After extracting an AssignmentTags component, what is a good way to notify the parent component that the selected tag changed so it can re-render the list?
Video class: Learn Vue 3 - Ep 12, A Deeper Look at v-model 08m
Exercise: When using v-model on a custom component in Vue 3, what prop and event name are required by default to keep parent and child in sync?

Video class: Learn Vue 3 - Ep 13, Lifecycle Hooks, Fake APIs, and AJAX 08m
Exercise: Which lifecycle hook is used to fetch assignments from a fake API as soon as the component is created (before it is mounted to the DOM)?
Video class: Learn Vue 3 - Ep 14, Flexible Vue Components With Slots and Flags 10m
Exercise: Which approach best allows a parent to selectively add extra content (like an input form) beneath a reusable list component without duplicating it for every instance?
Video class: Learn Vue 3 - Ep 15, Named Slots 11m
Exercise: How can you prevent rendering an empty
when a named slot (like a heading) is not provided?

Video class: Learn Vue 3 - Ep 16, An Introduction to Vite 10m
Exercise: What is the main benefit of Vite’s hot module replacement (HMR) during development?
Video class: Learn Vue 3 - Ep 17, Little Confusing Things About Vue 10m

Video class: Learn Vue 3 - Ep 18, Two Mental Leaps to Script Setup 15m
Exercise: In the Composition API, why didn’t a plain string returned from setup() update with v-model until it was wrapped in ref()?
Video class: Learn Vue 3 - Ep 19, From Mixins to Composables 11m
Video class: Learn Vue 3 - Ep 20, Composables Example 17m
Exercise: When using a composable to keep a ref in sync with localStorage, what Vue Composition API feature is used to react to changes (including changes not triggered by input events)?
Video class: Learn Vue 3 - Ep 21, Refactoring to defineEmits and defineProps 16m
Exercise: In a Vue 3 script setup component, what is required to make v-model work on a custom textarea component?

Video class: Learn Vue 3 - Ep 22, Dependency Injection With Provide and Inject 09m
Exercise: In Vue 3, what problem do provide() and inject() primarily help solve in a nested component tree?
Video class: Learn Vue 3 - Ep 23, Store State in an External File 07m
Exercise: When moving shared quiz data into its own store file, what change is needed so updates (like changing the quiz name) automatically reflect across all components that import it?
Video class: Learn Vue 3 - Ep 24, Direct Mutation Concerns 06m
Exercise: Why place the counter state in a dedicated store instead of keeping it only inside the Counter view component?

Video class: Learn Vue 3 - Ep 25, Say Hello to Pinia 08m
Exercise: In a Pinia store, which section is used for computed-like values such as a "remaining" count?
Video class: Learn Vue 3 - Ep 26, Team Dashboard Exercise 15m
Exercise: What is the primary benefit of extracting repeated table rows into a dedicated TeamMember component?
Video class: Learn Vue 3 - Ep 27, Build and Seed a Team Store 12m

Learn aboutVueJS

Explore the best free online VueJS courses and learn to build fast, interactive web applications with this popular JavaScript framework. Study Vue fundamentals, components, routing, state management, and real-world app development at your own pace. Enroll for free, improve your front-end skills, and earn a certificate upon completion.

Learn aboutJavaScript

Explore the best free online JavaScript courses with certificates and build in-demand web development skills at your own pace. Learn JavaScript fundamentals, DOM manipulation, ES6, APIs, frameworks, and more through beginner-friendly and advanced classes. Enroll today, earn a certificate, and strengthen your resume for developer career opportunities.