Learning Path: Vue.js: Build Reactive Web Apps with Vue 2
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
10 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Vue.js: Build Reactive Web Apps with Vue 2 to your Wishlist.

Add to Wishlist

Learning Path: Vue.js: Build Reactive Web Apps with Vue 2

Go an extra mile and learn how to build amazing, complex reactive web applications with advanced features of Vue.js
New
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
10 students enrolled
Created by Packt Publishing
Last updated 9/2017
English
English [Auto-generated]
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 10 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a fully-functioning reactive web application in Vue .js from scratch
  • See the importance of the MVVM architecture and how Vue .js compares with other frameworks such as Angular .js and React .js
  • Know how to bring reactivity to an existing static application using Vue .js
  • Learn to use the Vue command line interface to scaffold a new application using WebPack
  • Manage real-time backend interactivity with your application and listen for different events
  • Deploy your application using FTP and other alternatives
View Curriculum
Requirements
  • Basic programming knowledge of HTML, CSS, and JavaScript
Description

Vue.js 2 is an open-source progressive JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Vue also functions as a web application framework capable of powering advanced single-page applications. If you're interested to build professional web applications with Vue 2, then you go for this Learning Path.

Packt’s Video Learning Paths are 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:

  • Learn how to build dynamic content into pre-existing web applications
  • Master the most important features in Vue 2 that change the game for web developers

From the initial structuring to full deployment, this Learning Path provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js. You will start by building a simple application in Vue.js so you can observe its features in action. Delving into more complex concepts, you will learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. This Learning Path will also show how to bring reactivity to an existing static application using Vue.js.

Further, you will learn to set up a well thought out folder structure for your application. You will then look into adding Vuex functionality to your application such as Vue Router and Vuex Store and how to fetch data from other websites. After that you will learn to add awesome third-party functionality to interact with a backend, and handle different events. Finally, you will configure and deploy your application, then upload it using FTP or otherwise.

By the end of this Learning Path, you will have both the understanding and the practical examples that will allow you master the art of web development and the MVVM architecture in the real world to build high-performing web interfaces with Vue.js 2.

About the Authors:

  • Olga Filipova took her master's degree in computer science in Portugal at Coimbra University. She worked as a software engineer at Feedzai and as a tutor for professional web development course at a training center in Coimbra. Currently working as a senior software engineer and JavaScript team leader at Meetrics and as technical director at EdEra, she is skilled in project management, team leading, web development, server management, and programming.
  • 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 as well as 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.
Who is the target audience?
  • This Learning Path is for novice web developers who want to learn new technologies or frameworks. Whatever your level of expertise, this Learning Path is a great introduction to the wonderful world of reactive web apps.
Compare to Other Vue JS Courses
Curriculum For This Course
78 Lectures
09:54:41
+
Web Development with Vue.js 2
42 Lectures 05:40:35
This video gives an overview of the entire course.
Preview 04:27

This video is an introduction to the terminology used in this course and for Vue, which will enable you to understand Vue better.

Buzzwords
05:54

In this video, we will learn the importance of Vue and create a shopping list application using Vue.

The Importance of Vue.js and Working with Vue.js
14:31

Using Vue.js in a project is simple. In this video, we will see how to avoid any extra work with other frameworks and use Vue.js

Using Vue.js in an Existing Project
03:52

Vue.js was made better with the release of Vue.js 2.0. In this video, we will look at the release of Vue.js 2.0 and the projects that were made using Vue.js 2.0.

Vue.js 2.0! and Projects Using Vue.js
05:21

After learning about Vue, we will get started with creating an application. In this video, we will create an application, Pomodoro timer.

Let's Manage Time!
09:44

In this video, we will learn about the MVVM (Model View View Model) pattern, which helps in binding Model to the view and vice versa.

Preview 02:23

All Vue properties go through the DefineProperty method, which assigns getters and setters to them. This is what makes the binding so strong. Let’s learn about them!

DefineProperty, Getters, and Setters
03:24

Whenever you try a new tool, you want to compare it with other tools. In this video, we will compare Vue with other frameworks.
Comparing with Other Frameworks
05:40

Before putting our hands into the code and starting to enhance our applications with components, plugins, mixins, templates, and other things, let's overview the main Vue features.

Vue.js Fundamentals
12:59

In this video, we will analyze all possible ways to install Vue.js. We will also learn debugging and testing our application

Installing, Using a Vue.js Application
14:26

Debugging is necessary for a Vue application. In this video, we will debug our application.

Debugging Your Vue Application
02:08

Scaffolding our applications is necessary so that the reusable components can be used in them. In this video, we will scaffold the application

Scaffolding Our Applications
05:22

Components are an important part of any Vue Application. So, we will create and use a component in our application

Preview 10:06

Now that we have learnt about components, we will use them to rewrite our application.

Rewriting the Shopping List with Simple Components
07:37

Single-file components are better to work with. Vue provides a lot of features with single-file components. In this video, we will learn about single file components.

Single-File Components
07:10

In this video, we will rewrite our application using single-file components, about which we learnt in the previous video.
Rewriting Our Shopping List Application with Single-File Components
08:45

As we rewrote our shopping list application, similarly, we will rewrite our Pomodoro application using single-file components.

Rewriting the Pomodoro Application with Single-File Components
04:08

With Vue, you can use the special transition wrapper component to specify the CSS transition to use on data changing. We will learn about that here.

Reactive Binding of CSS Transitions
04:27

Data binding is a mechanism of propagating changes from the data to the visible layer and vice versa. We will revisit all the different ways of data binding and apply them to our applications.

Preview 04:40

Vue supports full JavaScript expressions inside the data binding brackets! By adding any JavaScript expression to the template of Pomodoro application components, filters are applied to the result of the expression.

Using Expressions and Filters
07:03

V-bind directive allows binding an element's attribute or a component property to an expression. The v-if directive allows to conditionally render the whole element.

Revisiting and Applying Directives
24:48

In this video, we will change the title component using events.
Preview 08:56

In this video, we will learn the importance of the global state store. We will understand Vuex and its store.

Introduction to Vuex and the Global State Store
05:16

Greetings are important to users who use your application. In this video, we are going to create a greetings example to see Vuex in action.

Greetings with Store
20:11

In this video, we will install Vuex and import the store to our application.

Installing and Using the Vuex Store in Our Applications
01:59

In this video, we are going to take a look at changing the title, finding shopping lists by ID with the help of the Vuex store.
Using the Vuex Store in the Shopping List Application
04:52

In this video, we are going to animate our pause, stop, and run buttons, and improving the time interface of the Pomodoro timer using the Vuex store. We will also add a few changes to make the timer fun.

Using the Vuex Store in the Pomodoro Application
18:13

Plugins written for Vue can provide various functionalities, starting from the definition of some global Vue methods or even the instance methods. Let’s use the existing resource plugin for Vue.

Preview 22:07

Now that we know how to use thye existing plugins with our Vue application, why not create our own plugin? We already have a little bit of animation in our Pomodoro application. It would be nice to add some sounds to our Pomodoro!

Creating and Using a Plugin in the Pomodoro Application
14:12

Before we start writing unit tests, let's try to understand what we're trying to achieve by writing them. Why is unit testing so important?

Preview 04:26

Let's check on some particularities of unit testing our Vue application and its components. In order to be able to write tests for the component instance, first of all, it should be instantiated!

Unit Tests for Vue Applications
02:47

Before starting the actual writing of our unit tests, let's establish some rules. For each of our .js or .vue files, there will exist a corresponding test spec file, which will have the same name and a .spec.js extension

Writing Unit Tests for the Shopping List Application
20:29

In this video, we will write unit tests for our pomodoro application to test it.

Writing Unit Tests for Our Pomodoro Application
03:34

End-to-end (e2e) testing is a technique in which the whole flow of the application is being tested. In this kind of testing, neither mocks nor stubs are used, and the real system is being under the test.

End-to- end Testing and Nightwatch e2e
04:07

So, now that we know all the theory behind the UI testing, we can create our first end-to-end test for our Pomodoro application. Let's define the steps that we will perform and the things that we should test.

Writing e2e Tests for the Pomodoro Application
04:45

Deploying web applications, it means that there will be a public URL, and any person will be able to type this URL on their browser and access the application.

Preview 08:49

In this section, we will prepare the application to run on Heroku.

Deploying the Pomodoro Application
06:26

In this section, we will perform a similar procedure and deploy our shopping list application.

Deploying the Shopping List Application
04:59

We applied the most important concepts of Vue to make our applications reactive, fast, maintainable, and testable. However, it’s important to know that Vue 2.0 has been launched. It brings some new possibilities and some new things to learn and use.

Preview 02:52

Let's check again what we have done so far. We have developed two applications using Vue.js. Let's revisit them.

Revisiting Our Applications
02:41

In the previous video, we summarized what the applications that we have developed are doing. They are nice but lack features, style, identity, UX patterns, extension to other platforms, and so on. Let's check what we can still do.

Why is it Just the Beginning?
09:59
+
Building Your First Advanced CRUD Application with Vue 2
36 Lectures 04:14:06

This video gives an overview of the entire course.

Preview 05:06

In this video, we’ll learn how to use Git to clone the repository for our API.

Cloning the API
04:59

In this video, we’ll learn how to install and use Composer to download the packages necessary for the API.

Installing and Using Composer
02:52

In this video, we’ll take a look how to install Virtual Box and Vagrant.
Installing Virtual Box and Vagrant
03:04

In this video, we will install Homestead.

Installing and Configuring Laravel Homestead
04:59

In this video, we will find out what Algolia is and how we can use it as our search engine.

Configure Algolia as Our Search Engine
06:55

In this video, we will configure Pusher with our API.
Configuring Pusher
03:24

In this video, we will test our API and make sure everything is working correctly.

Testing Our API
10:49

In this video, we will create a new Vue application and install the packages that are needed.

Installing the Necessary Packages
08:15

In this video, we will configure the necessary packages.
Configuring Our Installed Packages
12:10

In this video, we will create a new Vue application and install the packages that are needed.

Defining Our Routes
10:58

In this video, we will create the artists overview page.

Creating the Artists Overview Page
08:34

In this video, we will fix the styling for the artists overview page.

Fix the Styling For the Artists Overview Page
08:25

In this video, we will make the drawer work.

Fixing the Drawer
09:39

In this video, we will refactor the artists overview page into a layout file.

Refactoring to a Layout
05:44

In this video, we will create the artists create page.

Creating the Artists Create Page
05:22

In this video, we will create the artists show page.

Creating the Artists Show Page
05:15

In this video, we will create the artists edit page.

Creating the Artists Edit Page
06:56

In this video, we’ll take a look at how to create the album pages.

Creating the Album Pages
12:00

In this video, we’ll take a look at how to create the song pages.
Creating the Song Pages
08:58

In this video, we will only create the not found page.
Creating the Not Found Page
01:32

In this video, we will create the login page.

Creating the Login Page
03:50

In this video, we will connect the frontend to our API
Connecting to Our API
04:17

In this video, we’ll add the authentication layer to our frontend
Adding the Authentication Layer
07:18

In this video, we’ll add metadata to our routes to make sure that when the user is authenticated, the correct page is shown.

Adding Metadata to Our Routes
06:19

In this video, we’ll add the functionality to our login page.

Making the Login Page Work
11:35

In this video, we’ll add the functionality to our artists overview page.

Making the Artists Overview Page Work
13:12

In this video, we’ll add the search functionality to the artists overview page.

Adding Search Functionality to the Artists Overview Page
13:11

In this video, we’ll add the functionality to the artists create page.

Adding the Functionality to the Artists Create Page
04:09

In this video, we’ll add the functionality to the artists show page.

Adding the Functionality to the Artists Show Page
05:42

In this video, we’ll add the functionality to the artists' edit page.

Adding the Functionality to the Artists Edit Page
05:16

In this video, we’ll add alerts to our application.

Adding Alerts to Our Application
12:15

In this video, we’ll refactor the actions on the drawer to a Vuex module.
Fixing the Drawer,Once Again
04:21

In this video, we’ll start with making Laravel Echo work.

Making Laravel Echo Work
06:48

In this video, we’ll make the artist updated event work.

Listening for the Artist Updated Event
03:22

In this video, we’ll make the artist deleted event work.

Listening for the Artist Deleted Event
06:35
About the Instructor
Packt Publishing
3.9 Average rating
8,229 Reviews
58,964 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.