Learning Path: Vue.Js: Rapid Web Development With Vue 2

Level up your application development skills and build interactive applications with Vue 2

What you'll learn

Learn to build a fully functioning reactive web application in Vue .js from scratch

Know how to bring reactivity to an existing static application using Vue .js

Find out how to use plugins to enrich your applications

Understand how to add transitions and animations to your Vue 2 application

Explore the core features of Vue .js through small examples

Understand how to use an external API to fetch and process data

Create Vue components for structuring your application

Requirements

Basic knowledge of Vue. js is required.

Description

Vue.js is a new JavaScript framework that has taken some of the best practices and features of the most popular JavaScript frameworks. It’s purpose is to build a lightweight, progressive framework that can be used for rapid web development as well as for building enterprise-level applications. So, if you're a web developer having basic knowledge of Vue.js and wish to take your web development skills to the next level, then go for this Learning Path.
Packt’s Video Learning Path is a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.


The highlights of this Learning Path are:

●  Build a fully functioning reactive web application in Vue.js from scratch

●  Learn to develop customized plugins to meet your needs

●  Add transitions and animations to your Vue 2 applications

Let’s take a quick look at your learning journey. This Learning Path begins with building a simple application in Vue.js for you to observe its features. You will then explore advanced topics such as data binding, reusable components, filters, and state management with Vuex. You will also learn to bring reactivity to an existing static application using Vue.js.


Next, you will explore various tasks that you will come across while building your web applications with Vue.js. You will learn to add different elements, filters, properties, and forms to your application. You will also explore the different transitions and animations possible with Vue.js.


Going ahead, this Learning Path teaches how to make Vue.js applications more dynamic. You will learn how to add communication with remote resources to your application. Next, you will explore vue-router 2.0 to build a single-page application. Finally, you will build 3 real-time projects with Vue 2.


By the end of this Learning Path, you'll gain hands-on experience in building and testing applications with Vue.js 2.

Meet Your Expert:

We have the best works of the following esteemed authors to ensure that your learning journey is smooth:






Olga Filipova was born in the Ukraine, in Kyiv. She grew up in a family of physicists, scientists, and professors. She studied system analysis at the National University of Ukraine Kyiv Polytechnic Institute. At the age of 20, she moved to Portugal where she did her bachelor's and master's degrees in computer science in the University of Coimbra. During her studies, she participated in research and development of European projects and became an assistant teacher of operating systems and computer graphics. After obtaining her master's degree, she started to work at Feedzai. In 2013, along with her brother and her husband, she started an educational project based in Ukraine. This project's name is EdEra and it has grown from a small platform of online courses into a big player in the Ukrainian educational system. Currently, EdEra is pointing in an international direction and preparing an awesome online course about IT. In 2014, Olga, with her husband and daughter, moved from Portugal to Berlin, where she started working at Meetrics as a front-end engineer, and after a year she became the lead of an amazing team of front-end software developers.        


Peter van Meijgaard is a web application developer who has been tinkering with web development ever since he can remember. He is an avid JavaScript developer and loves Vue.js for its simplicity and its ability to facilitate web app development. He has given various talks on Vue.js in the past, and has also worked on various training programs.



Overview

Section 1: Web Development with Vue.js 2

Lecture 1 The Course Overview

Lecture 2 Buzzwords

Lecture 3 The Importance of Vue.js and Working with Vue.js

Lecture 4 Using Vue.js in an Existing Project

Lecture 5 Vue.js 2.0! and Projects Using Vue.js

Lecture 6 Let's Manage Time!

Lecture 7 The MVVM Architectural Pattern

Lecture 8 DefineProperty, Getters, and Setters

Lecture 9 Comparing with Other Frameworks

Lecture 10 Vue.js Fundamentals

Lecture 11 Installing, Using a Vue.js Application

Lecture 12 Debugging Your Vue Application

Lecture 13 Scaffolding Our Applications

Lecture 14 Revisiting Components and Their Benefits

Lecture 15 Rewriting the Shopping List with Simple Components

Lecture 16 Single-File Components

Lecture 17 Rewriting Our Shopping List Application with Single-File Components

Lecture 18 Rewriting the Pomodoro Application with Single-File Components

Lecture 19 Reactive Binding of CSS Transitions

Lecture 20 Revisiting Data Binding and Interpolating Data

Lecture 21 Using Expressions and Filters

Lecture 22 Revisiting and Applying Directives

Lecture 23 Parent-Child Components' Communication, Events, and Brain Teaser

Lecture 24 Introduction to Vuex and the Global State Store

Lecture 25 Greetings with Store

Lecture 26 Installing and Using the Vuex Store in Our Applications

Lecture 27 Using the Vuex Store in the Shopping List Application

Lecture 28 Using the Vuex Store in the Pomodoro Application

Lecture 29 Using the Vue-Resource Plugin in the Shopping List Application

Lecture 30 Creating and Using a Plugin in the Pomodoro Application

Lecture 31 Why Unit Tests?

Lecture 32 Unit Tests for Vue Applications

Lecture 33 Writing Unit Tests for the Shopping List Application

Lecture 34 Writing Unit Tests for Our Pomodoro Application

Lecture 35 End-to- end Testing and Nightwatch e2e

Lecture 36 Writing e2e Tests for the Pomodoro Application

Lecture 37 Software Deployment

Lecture 38 Deploying the Pomodoro Application

Lecture 39 Deploying the Shopping List Application

Lecture 40 Vue 2.0

Lecture 41 Revisiting Our Applications

Lecture 42 Why is it Just the Beginning?

Section 2: Vue.js 2 Recipes

Lecture 43 The Course Overview

Lecture 44 Using Different Vue CLI Templates for Your Application

Lecture 45 Building a Simple Application with Vue

Lecture 46 Adding Reactive Elements to Your Vue Application

Lecture 47 Adding Interactivity to Your Web Application with Events

Lecture 48 Constructing Your Own Vue Filters for Transforming Your Output

Lecture 49 Debugging Your Vue Application

Lecture 50 Filtering a List Using a Computed Property

Lecture 51 Sorting a List Using a Computed Property

Lecture 52 Using Filters to Show Currency

Lecture 53 Working on Dates with Filters and MomentJS

Lecture 54 Conditionally Rendering Your Pages with v-if and v-show

Lecture 55 Manipulating an Element by Binding Styles and Classes

Lecture 56 Building a Basic Form Using Bootstrap and Vue

Lecture 57 Handling Form Buttons of Different Types

Lecture 58 Employing Vue Selects, Checkboxes, and Radio Elements in Your Form

Lecture 59 Creating Your Own Transition Classes

Lecture 60 Transitioning on Initial Render

Lecture 61 Transitioning between Elements

Lecture 62 Entering and Leaving Transitions for Elements in a List

Lecture 63 Reusing Transitions Throughout Your Application

Lecture 64 Creating Reactive Transitions for Your Application

Lecture 65 Creating Dynamic Components for Your Applications

Lecture 66 Passing Data between Parent/Child Dynamic Components

Lecture 67 Adding Component Events to Your Application

Lecture 68 Passing Properties to Components

Lecture 69 Handling Data Outside of a Component

Lecture 70 Creating Reusable Components for Your Application

Lecture 71 Using Slots in Components for Passing Data

Lecture 72 Packaging a Component in a Vue File with Webpack

Lecture 73 Working with Advanced Vue Files

Lecture 74 Making Basic Calls

Lecture 75 Making Reactive Calls Inside Your Application

Lecture 76 Making Form Calls Within Your Application

Lecture 77 Error Handling

Lecture 78 Using Request and Response Interceptors

Lecture 79 Throttling and Debouncing Requests Using Lodash

Lecture 80 Protecting Your Application Against CSRF

Lecture 81 Developing Pages for Vue Router

Lecture 82 Using Route Parameters

Lecture 83 Adding Navigation Guards

Lecture 84 Developing Nested Routes

Lecture 85 Redirecting Using Navigation Guards

Lecture 86 Handling Authentication and Route Metadata

Lecture 87 Create Login Functionality in Combination with LocalStorage

Lecture 88 Adding Vuex to Your Application

Lecture 89 Accessing Store Data in Components

Lecture 90 Structuring a Small Vuex Store

Lecture 91 Managing Your Application's State with Vuex

Lecture 92 Making Use of Vuex Getters

Lecture 93 Changing Your Application's State with Mutations

Lecture 94 Committing Mutations with the Help of Actions

Lecture 95 Managing Your Application's Store Size with Modules

Lecture 96 Using Vuex Plugins in Your Applications

Lecture 97 Handling Forms in Your Application with Vuex

Lecture 98 Unit Testing a Vue Component

Lecture 99 Unit Testing the Actions from the Vuex Store

Lecture 100 Unit Testing the Mutations from the Vuex Store

Lecture 101 Unit Testing the Getters from the Vuex Store

Lecture 102 End-to-End Testing with Nightwatch

Section 3: Fun Projects with Vue 2

Lecture 103 The Course Overview

Lecture 104 Introduction to the todo Application

Lecture 105 Setting Up Our Development Environment

Lecture 106 Let’s Start by Adding todos

Lecture 107 Toggling and Removing a todo

Lecture 108 Editing a todo

Lecture 109 Introduction of the GitHub Application

Lecture 110 Scaffolding Our Application

Lecture 111 Setting Up Vue Router

Lecture 112 Setting Up Axios

Lecture 113 Setting Up Vue Material

Lecture 114 Making the Text-Input Working

Lecture 115 Creating the Repositories Table

Lecture 116 Creating the User Table

Lecture 117 Introduction to the Chat Application

Lecture 118 Scaffolding Our Client and Server

Lecture 119 Adding Packages to Our Client

Lecture 120 Setting Up the Vuex Store

Lecture 121 Setting Up Our Pages

Lecture 122 Adding Functionality to the Join Page

Lecture 123 Styling the Join Page

Lecture 124 Finalizing the Join Page

Lecture 125 Adding Functionality to the Room Page

Lecture 126 Finalizing the Rooms Page

Lecture 127 Final Tweaks

This Learning Path is for web developers who wish to explore the latest Vue .js framework to build enterprise-ready web applications.