Learn Vue 3: Step by Step
I've been teaching Vue for years now. In fact, way back in 2015, as part of the first ever Vue series at Laracasts, I boldly predicted that Vue was about to skyrocket in popularity. That prediction turned out to be spot on. To be fair, though, it was an easy one. You need only spend ten minutes with the framework to understand why so many swear by it.
Whether you're brand new to Vue, coming over from a different framework, or simply want a refresher on the fundamentals, this new Vue 3 series is for you! We start at the beginning, and work our way up one step at a time.
Series episodes
Getting Started (3)
Vue 3 Absolute Basics
7m 3sStart your Vue 3 journey by learning initialization, text interpolation, and reactivity using a CDN in this friendly, beginner-focused Laracasts lesson!
Attribute Binding and Event Handling
8m 43sLearn how to bind HTML attributes with Vue's v-bind and get introduced to event handling in this clear, hands-on Laracasts lesson for dynamic apps!
Lists, Conditionals, and Computed Properties
14mMaster Vue basics by learning to loop lists, use conditionals, and create computed properties with an assignment list example in this engaging Laracasts episode!
Vue Components (4)
Your First Custom Vue Component
8m 21sStart building real Vue apps by creating your first custom component. Learn the basics to craft dynamic, reusable UI in this friendly Laracasts lesson!
One Vue Component Per File
4m 8sKeep your Vue apps clean and organized by learning how to store each component in its own file in this practical, easy-to-follow Laracasts episode!
Component Props
8m 23sLearn how to use Vue props to pass data into components, making them flexible and configurable for dynamic, reusable UI in this friendly Laracasts lesson!
Bring it All Together
15m 45sRevisit assignment lists with fresh Vue insights and learn how to build cleaner, smarter components in this engaging Laracasts episode.
Event Handling (2)
Handle a Form Submission
9m 3sMaster handling form submissions and events to let users create new assignments instantly in this hands-on, easy-to-follow Laracasts episode!
Parent-Child State Communication
6m 48sLearn how to manage state communication between parent and child Vue components effectively, keeping your app reactive and organized in this clear Laracasts lesson!
Beyond the Basics (6)
It's All So Easy
11m 10sDiscover how mastering Vue basics speeds up your development. See quick examples that turn complex tasks into easy, efficient workflows in seconds!
Component Responsibility
8m 7sLearn how to define clear component responsibility by refactoring with AssignmentsTags. Keep your Vue components focused, organized, and maintainable!
A Deeper Look at V-Model
8m 25sDive deeper into Vue's v-model directive. Understand how it works on inputs and custom components to build seamless, reactive forms with ease!
Lifecycle Hooks, Fake APIs, and AJAX
8m 21sLearn how to use Vue lifecycle hooks with fetch() to load data from fake APIs. Build realistic, dynamic apps by fetching data instead of hard-coding it!
More Flexible Components With Slots and Flags
10m 47sBoost your Vue components' flexibility using slots and flags. Learn simple techniques to create configurable, reusable components with ease and clarity!
Named Slots
11m 27sLearn how to use named slots in Vue to insert content into multiple areas of a component. Enhance your layouts with flexible, organized component design!
Vite (2)
Vite
10m 27sReady to build Vue SPAs? Learn how to use Vite, a fast, first-party tool, to streamline your development and boost your app’s performance with ease!
Little Confusing Things
10m 54sTackle common confusions as you build Vue apps with routing and config. Clarify tricky concepts and boost your confidence in this friendly, clear lesson!
The Composition API (4)
Two Mental Leaps to Script Setup
15m 37sDiscover two key mindset shifts to master Vue's Composition API and script setup. Embrace new patterns and level up your Vue skills with confidence!
From Mixins to Composables
11m 13sExplore code re-use by comparing traditional mixins with modern composables. Learn best practices for cleaner, reusable code in this friendly Laracasts episode!
Composable Example: Local Storage
17m 32sLearn how to create a Vue composable that uses localStorage and reactivity to remember form input values—even after refreshing the page—for seamless user experience.
Refactor to defineProps and defineEmits
16m 33sMaster Vue’s Composition API by refactoring with defineProps and defineEmits using script setup, featuring an enhanced tabbable textarea example.
Managing State (4)
Dependency Injection With Provide and Inject
9m 30sExplore dependency injection in Vue, learn to avoid prop drilling, and discover how provide/inject simplifies passing data across your app’s components.
Store State in an External File
7m 3sLearn how to share state across components by storing it in a reusable external file. Simplify your app’s data flow with this easy, effective technique.
Direct Mutation Concerns
6m 17sExplore key concepts and risks of directly mutating state before diving into Pinia. Learn best practices for safer, more predictable global state management.
Say Hello to Pinia
8m 55sDiscover Pinia for global state management in Vue. Enjoy better devtools, hot reloading, and time-travel debugging to boost your app development workflow.
Team Dashboard Exercise (2)
Code Organization
15m 56sBuild a SaaS team dashboard by organizing your layout into Vue components. Follow along as we design and structure a real-world app step-by-step.
Build and Seed a Team Store
12m 10sCreate a dedicated Pinia team store and learn how to seed it with asynchronously fetched initial data for predictable state management.
Transitions, Teleports, Tips (3)
Build a Modal Component
13mQuickly build a reusable Vue modal component, create, toggle, and integrate a clean, accessible modal into your app with minimal fuss.
Two Ways to Transition
10m 3sAdd polished show/hide animations to your modal with two Vue Transition approaches and learn practical techniques for smoother, accessible UI.
Teleporting
8m 3sLearn Vue Teleport to place modals at the bottom of the page, creating cleaner, accessible modals rendered before the closing body tag.
