Learn Vue 3: Step by Step

Learn Vue 3: Step by Step

  • 31 videos
  • 05 h 22 min
  • Beginner
  • FREE


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.


    SECTION 1 Getting Started

  • 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.

  • 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

  • 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

  • SECTION 2 Vue Components

  • 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.

  • 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

  • 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.

  • 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

  • SECTION 3 Event Handling

  • Handle a Form Submission


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

  • 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.

  • SECTION 4 Beyond the Basics

  • 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

  • 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

  • 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

  • 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.

  • 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.

  • 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,

  • SECTION 5 Vite

  • Vite


    Great job, if you've made it this far. I think you're now ready to move on to part two of this series. Now that you understand many of the fundamentals of Vue, let's now figure out how to actually construct a

  • 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.

  • SECTION 6 The Composition API

  • 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.

  • 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

  • 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.

  • 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.

  • SECTION 7 Managing State

  • 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

  • SECTION 6 The Composition API

  • 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

  • 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.

  • 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

  • SECTION 8 Team Dashboard Exercise

  • 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

  • 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.

  • SECTION 9 Transitions, Teleports, Tips

  • 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.

  • 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.

  • 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

  • SECTION 10 Conclusion

  • 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.


No review yet.


Jeffrey Way Profile Picture

Jeffrey Way

Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida