Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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.

Progress

Series Info

Episodes
31
Run Time
5h 22m
Difficulty
Beginner
Last Updated
Aug 5, 2022
Version
Vue 3
Play Series

Series Episodes

  1. Getting Started (3)

    1. Vue 3 Absolute Basics

      Let's start...at the beginning! We'll pull in Vue 3 through a CDN, and then review the absolute basics of the framework, including Vue initialization, text interpolation, and reactivity.

    2. Attribute Binding and Event Handling

      You'll often want to bind the value of an HTML attribute to an expression. We can allow for this by using the v-bind directive. As part of this lesson, we'll also get a first taste of event handling in Vue.

    3. Lists, Conditionals, and Computed Properties

      Let's dig into a few more important concepts in this episode. Using the example of an assignment list, we'll learn how to loop over arrays, conditionally display HTML, and prepare computed properties.
  2. Vue Components (4)

    1. Your First Custom Vue Component

      We've now learned the absolute basics of Vue; however, this still looks nothing like real-life Vue applications. Let's begin digging into custom Vue components.

    2. One Vue Component Per File

      We can technically inline child Vue components, but you'll rarely do so. Instead, a much cleaner approach is to store each Vue component within its own file. Let's take care of that in this episode.

    3. Component Props

      If we want our Vue components to be as flexible as possible, we should figure out a way to pass in data from the outside. This way, each "instance" of a component can be configurable. Props allow for this!

    4. Bring it All Together

      Let's now return to the simple assignment lists that we worked on in episode three. But this time, we'll approach it with fresh eyes and a new understanding of how Vue components work.
  3. Event Handling (2)

    1. Handle a Form Submission

      In this episode, we'll combine forms and events to allow a user to create new assignments on the fly.

    2. Parent-Child State Communication

      Now, let's throw a wrench into the mix. If we extract a new Vue component, we'll then need to figure out how our components should communicate state changes.
  4. Beyond the Basics (6)

    1. It's All So Easy

      Once you understand the basics of Vue, you'll quickly find that things, which were incredibly time consuming years ago, can now be accomplished in seconds. Let's review a couple examples in this video.

    2. Component Responsibility

      In this episode, we'll discuss component responsibility as we refactor to an AssignmentsTags component. I think of component responsibility in the same way that I think of server-side class responsibility. "Does this bit of logic belong here?"

    3. A Deeper Look at V-Model

      We reviewed the basics of the v-model directive at the beginning of the series, but I think it's time that we take a deeper look. What exactly happens when we apply v-model to an input? And can we also use it on custom Vue components?

    4. Lifecycle Hooks, Fake APIs, and AJAX

      So far, we've been hard-coding the list of assignments directly within our Vue component. But of course, that's not overly realistic. Let's switch over to using the fetch() JavaScript API to request data from a fake API.

    5. More Flexible Components With Slots and Flags

      There are many ways to allow for more flexible and configurable components. Let's begin with two simple and obvious techniques: slots and flags.

    6. Named Slots

      So far, we've been working with components that only required a single, default slot. But, of course in real life, you'll encounter situations where you need to insert content in multiple areas. In these cases, we can used named slots.
  5. Vite (2)

    2. Little Confusing Things

      At this stage, I fully expect you to be confused in numerous ways. We went from building basic Vue components to scaffolding a full single-page application with routing, configuration, aliases, and more. In this lesson, let's review a handful of small things that I think you might initially find to be confusing.
  6. The Composition API (4)

    1. Two Mental Leaps to Script Setup

      I must admit, I feel bad for what I'm about to do. You were becoming so comfortable, and I had to suddenly throw a wrench into the gears. In this lesson, let's mentally adjust to working with the Composition API and script setup.

    2. From Mixins to Composables

      Let's talk about code re-use in this episode. We'll begin by reviewing a basic example using a traditional, mixin-based approach. And then, we'll convert it to the more recommended approach these days: composables.

    3. Composable Example: Local Storage

      Let's review another example of a composable. This time, we'll leverage localStorage and Vue reactivity to "remember" a form input's value - even if you refresh the page.

    4. Refactor to defineProps and defineEmits

      Let's review a couple other Composition API gotchas in this episode. Using the example of an enhanced "tabbable" textarea, we'll learn how to use defineProps and defineEmits when using script setup.
  7. Managing State (4)

    1. Dependency Injection With Provide and Inject

      Let's next move on to a discussion about dependency injection, and what that might look like within the context of a Vue application. One issue you'll quickly run into is what we refer to as "prop drilling." Let's learn what it is, and how to fix it.

    2. Store State in an External File

      So far, we've reviewed two different ways to share state across a wide range of components. But we're not done yet! Let's review a simple example that will take you a long way. There's nothing keeping you from extracting data, or state, to a reusable external file.

    3. Direct Mutation Concerns

      Before we move on to a dedicated tool for managing globally accessible state (Pinia), let's first review some new terminology and discuss potential concerns related to directly mutating state.

    4. Say Hello to Pinia

      I think we're finally ready to review dedicated tooling for managing global state. The go-to option these days is Pinia. Compared to our make-shift store from the previous episodes, Pinia will provide us with better devtool support, hot reloading, time traveling, and more!
  8. Team Dashboard Exercise (2)

    1. Code Organization

      Let's work on a more realistic exercise in this chapter. Let's prepare a dashboard for managing a team - perhaps for a SaaS. In this first episode, we'll review the design and then begin organizing the layout into a series of Vue components.

    2. Build and Seed a Team Store

      In this episode, we'll extract a dedicated Pinia store for managing the state for a team. We'll also discuss how you might go about seeding a store with initial date that is fetched asynchronously.
  9. Transitions, Teleports, Tips (3)

    1. Build a Modal Component

      Before I show you how transitions work, let's first build a modal component with Vue. As you'll find, it's surprisingly easy to create and toggle.

    2. Two Ways to Transition

      The modal we created in the previous episode is looking decent now. The next step is to add a bit of animation for when it shows and hides. To allow for this, we can use Vue's Transition component.

    3. Teleporting

      If you've ever built a modal before, you're probably aware that it's generally considered a good practice to place it at the bottom of the document, just before the closing body tag. In this episode, I'll show you how to do just that by leveraging Vue's Teleport component.
  10. Conclusion (1)

    1. That's All She Wrote

      I hate to say it, but that's all she wrote. We're all wrapped up for this series. But, of course, there's still more to learn. In this final episode, we'll review some recommended follow-up resources and courses. Thanks for watching!

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes