Learn Vue 3: Step by Step

Learn Vue 3: Step by Step

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

Overview

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.

Episodes

    SECTION 1 Getting Started

  • Vue 3 Absolute Basics

    07:03

    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

    08:43

    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

    14:00

    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

    08:21

    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

    04:08

    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

    08:23

    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

    15:45

    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

    15:03

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

  • Parent-Child State Communication

    06:48

    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

    11:10

    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

    08:07

    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

    08:25

    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

    08:21

    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

    11:47

    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

    11:24

    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

    10:27

    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

    10:54

    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

    15:37

    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

    11:13

    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

    17:32

    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

    16:33

    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

    09:30

    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

    07:03

    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

    06:17

    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

    08:55

    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

    15:56

    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

    12:10

    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

    13:00

    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

    10:03

    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

    08:03

    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

    03:52

    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.

Reviews

No review yet.

Author


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