O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Vue.js 2 Recipes

Video Description

Learn useful solutions to common problems encountered when building Vue 2 applications

About This Video

  • Understand and use Vue's reactivity system, data binding, and computed properties
  • Create fluid transitions in your application with Vue's built-in transition system
  • Use Vuex and Webpack to build medium-to-large scale SPAs and enhance your development workflow

In Detail

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex, single-page applications a breeze. Its component-based approach, intuitive API, blazingly fast core, and compact size make Vue.js a great solution with which to craft your next front-end application.

This video tutorial dives right into exploring various tasks that you will come across while building your web applications with Vue.js. You start with building a simple Vue application, and then learn to add different elements, filters, properties, and forms to your project. You'll explore the different transitions and animations possible with Vue.js, and add components and events to your Vue application, making it more dynamic as you go. After that, you'll learn how to add communication with remote resources to your Vue application and leverage VueRouter 2 to build a single-page application. Finally, you will delve into advanced state management with Vuex and learn to test the applications you've built.

By the end of this course, you'll be ready to take on real-world projects with Vue, armed with the solutions needed to face development tasks head-on.

Table of Contents

  1. Chapter 1 : Quick Start
    1. The Course Overview 00:05:46
    2. Using Different Vue CLI Templates for Your Application 00:04:20
    3. Building a Simple Application with Vue 00:02:39
    4. Adding Reactive Elements to Your Vue Application 00:03:48
    5. Adding Interactivity to Your Web Application with Events 00:05:45
    6. Constructing Your Own Vue Filters for Transforming Your Output 00:05:56
    7. Debugging Your Vue Application 00:04:55
  2. Chapter 2 : Computed Properties, Filters, and Conditionals
    1. Filtering a List Using a Computed Property 00:06:19
    2. Sorting a List Using a Computed Property 00:04:08
    3. Using Filters to Show Currency 00:02:50
    4. Working on Dates with Filters and MomentJS 00:08:29
    5. Conditionally Rendering Your Pages with v-if and v-show 00:07:01
    6. Manipulating an Element by Binding Styles and Classes 00:08:05
  3. Chapter 3 : Forms
    1. Building a Basic Form Using Bootstrap and Vue 00:04:21
    2. Handling Form Buttons of Different Types 00:03:47
    3. Employing Vue Selects, Checkboxes, and Radio Elements in Your Form 00:05:19
  4. Chapter 4 : Transitions
    1. Creating Your Own Transition Classes 00:05:24
    2. Transitioning on Initial Render 00:03:48
    3. Transitioning between Elements 00:03:30
    4. Entering and Leaving Transitions for Elements in a List 00:03:44
    5. Reusing Transitions Throughout Your Application 00:04:00
    6. Creating Reactive Transitions for Your Application 00:02:18
  5. Chapter 5 : Dynamic Components and Events
    1. Creating Dynamic Components for Your Applications 00:03:21
    2. Passing Data between Parent/Child Dynamic Components 00:02:17
    3. Adding Component Events to Your Application 00:03:36
  6. Chapter 6 : Advanced Components
    1. Passing Properties to Components 00:06:14
    2. Handling Data Outside of a Component 00:02:35
    3. Creating Reusable Components for Your Application 00:03:37
    4. Using Slots in Components for Passing Data 00:03:58
  7. Chapter 7 : Vue Files
    1. Packaging a Component in a Vue File with Webpack 00:07:47
    2. Working with Advanced Vue Files 00:06:25
  8. Chapter 8 : Axios
    1. Making Basic Calls 00:02:29
    2. Making Reactive Calls Inside Your Application 00:05:12
    3. Making Form Calls Within Your Application 00:02:15
    4. Error Handling 00:04:39
  9. Chapter 9 : Request Handling
    1. Using Request and Response Interceptors 00:04:22
    2. Throttling and Debouncing Requests Using Lodash 00:03:34
    3. Protecting Your Application Against CSRF 00:02:15
  10. Chapter 10 : Vue Router and Sessions
    1. Developing Pages for Vue Router 00:05:29
    2. Using Route Parameters 00:04:53
    3. Adding Navigation Guards 00:03:10
    4. Developing Nested Routes 00:03:06
    5. Redirecting Using Navigation Guards 00:02:11
    6. Handling Authentication and Route Metadata 00:03:31
    7. Create Login Functionality in Combination with LocalStorage 00:07:56
  11. Chapter 11 : Vuex
    1. Adding Vuex to Your Application 00:05:49
    2. Accessing Store Data in Components 00:06:24
    3. Structuring a Small Vuex Store 00:02:36
  12. Chapter 12 : Advanced Vuex
    1. Managing Your Application's State with Vuex 00:05:27
    2. Making Use of Vuex Getters 00:03:50
    3. Changing Your Application's State with Mutations 00:05:39
    4. Committing Mutations with the Help of Actions 00:02:50
    5. Managing Your Application's Store Size with Modules 00:09:35
    6. Using Vuex Plugins in Your Applications 00:03:46
    7. Handling Forms in Your Application with Vuex 00:05:50
  13. Chapter 13 : Testing Vue
    1. Unit Testing a Vue Component 00:08:20
    2. Unit Testing the Actions from the Vuex Store 00:06:38
    3. Unit Testing the Mutations from the Vuex Store 00:04:17
    4. Unit Testing the Getters from the Vuex Store 00:03:04
    5. End-to-End Testing with Nightwatch 00:07:05