Back Button Vue

The Vast World of Vue.js 0.12

Vue.js is the best JavaScript framework that you've likely never heard of. We've already covered React here at Laracasts, so let's move on to something else - something far more simple, many might say. Intrigued?

Intermediate
Difficulty
15 episodes
3:08:08 hrs
Start Series
Notification bell This series has been archived. We instead recommend: Learn Vue 2: Step By Step A series is marked as archived when the content is no longer up-to-date or relevant to most viewers.
  • Latest Episode: Vue Routing: Part 1

  • Like this series? Share the love!

    1. Run Time 30:07 Free

      Before we get our feet wet, give me a half hour, and we'll build a little tool together from scratch. Don't worry; I'll go fast in this video, but once we finish - and once you've had the chance to get really excited - we'll hit the brakes, and begin reviewing each fundamental piece of Vue.js.

      View the completed source (all 77 lines of it) and demo for this lesson on GitHub.

    2. Let's now step on the breaks, and review each component of Vue.js. Will begin with the basics: two-way binding between a piece of data on your Vue instance, and a form input.

    3. Run Time 5:00 Free

      Let's continue with another baby-step. You have an array of data, and simply need to filter through it and render each item/key on the page. It couldn't be simpler with Vue.js!

    4. Run Time 4:08 Free

      Listening for events is a basic requirement for any client-side work. While we once had to write tedious boilerplate to simply listen for a click or blur event, that's luckily no longer the case.

    5. Run Time 9:05 Free

      Before we move on to other key areas of Vue.js, let's toy around for a bit to ensure that you have a good understanding of basic interactions.

    6. Run Time 13:23 Free

      You'll frequently find yourself in need of a way to filter and order a set of data. Because this is such a common need, Vue provides the functionality out of the box. It's laughably simple!

      View the source for this episode on JSBin.

    7. Run Time 11:07 Free

      Now that you've learned about some of the default filters, let's learn how to create our own custom filters! It's really easy. Don't forget: a filter is nothing more than a function that receives value, translates it however needed, and returns the result.

      View the quick demo from this video on JSBin.

    8. Run Time 25:29 Free

      So how exactly do we make AJAX requests with Vue? In this video, we'll pull in the Resource Vue plugin to make this process as simple and familiar as possible. To demonstrate the workflow, from scratch, we'll build a general guestbook app.

      View the source for this episode on GitHub.

    9. Let's figure out a basic directory structure and workflow for using Browserify with Vue. Luckily, because we have Laravel Elixir, the process is significantly easier than it would be otherwise.

    10. Run Time 10:34

      Components allow us to create reusable pieces of functionality.

    11. Run Time 7:11 Free

      Props allow you to pass data, from a parent, down to a child component.

    12. Run Time 31:11

      Let's dive into workflow. In this video, we'll gather all of the things we've learned in this series, and put them together. We'll move pretty fast in this video, but if you've been following along, you should be fine. Lots to learn here, so let's get started!

      View the source for this episode on GitHub.

    13. Run Time 10:17 Free

      You've already made use of a number of directives. Everything from v-show, to v-on. But you can even create your own custom directives, when it's appropriate!

    14. Vueify is a Browserify transformer that offers an interesting mechanism to group the related styling, template, and module for any given component. Let me show you how it works!

      View the source for this lesson on GitHub.

    15. Run Time 7:32 Free

      In this lesson, let's figure out how to use Vue's official router to form the beginnings of a single-page application.

You May Also Enjoy...

Here are some additional series that may be up your alley.

Vue Laravel and the Front-end
Beginner
Difficulty

Let's take a break from the back-end, and instead focus on that other world: the front-end! Don't worry, Laravel 5 has made this process as enjoyable...

49:57 mins
Play
Vue Do You React?
Advanced
Difficulty

While Laracasts is dedicated to PHP and Laravel, the reality is that most of us need to write JavaScript daily as well. In this series, we'll learn ab...

1:25:24 hrs
Play
Vue Painless Builds With Elixir
Intermediate
Difficulty

Laravel Elixir takes the yawn out of writing your Gulpfiles. Why spends hundreds of lines writing what can be accomplished with just a few?

1:37:02 hrs
Play
Vue Modern CSS Workflow
Intermediate
Difficulty

The way we construct and think of CSS has changed drastically in the last ten years. In this series, we'll review key tools in every modern frontender...

1:41:11 hrs
Play
Vue Learn Flexbox Through Examples
Intermediate
Difficulty

Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me,...

1:12:25 hrs
Play
Vue Learn Vue 2: Step By Step
Intermediate
Difficulty

Vue is easily one of the most exciting additions to the front-end world in many years. With its intuitive API, and the fact that it can be applied to...

7:43:06 hrs
Play