Fun Projects with Vue 2
4.3 (4 ratings)
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.
55 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Fun Projects with Vue 2 to your Wishlist.

Add to Wishlist

Fun Projects with Vue 2

Get up and running with simple and fun projects using the Vue.js framework!
4.3 (4 ratings)
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.
55 students enrolled
Created by Packt Publishing
Last updated 5/2017
English
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • How to use Vue in your static application
  • How to use an external API to fetch and process data
  • How to use a state management plugin like Vuex
  • Create Vue components for structuring your application
  • Make your Vue.js application react to incoming events and respond accordingly
View Curriculum
Requirements
  • Viewers need to be familiar with the basics of HTML, CSS and JavaScript.
Description

Vue.js is the latest JavaScript framework to take web development community by storm. Since its release, it has managed to establish itself as one of the most popular frameworks for building user interfaces and is seeing rapid adoption rate. With Vue.js 2 released now, there are major improvements made in the framework making it leaner and faster

In this video course, you will start with creating a To-Do Application, where you will be taken through the necessary basics of Vue, and learn to add, toggle, remove, and change a to-do item. After that, you will build a GitHub application which connects to GitHub using the Axios client. You will learn to create different Vue components as well as handle computed properties for your application. Finally, you will then build a real-time chat application, where you will work with Pusher service, Vue Router, and Vuex.

By the end of this course, you will have worked with the different features of Vue.js that will make you fall in love with single page web application development.

About the Author

Peter van Meijgaard is a web application developer who has been tinkling with web development ever since he can remember. He is an avid JavaScript developer and loves Vue.js for its simplicity as well 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 programmes.

Who is the target audience?
  • If you are a Web Developer wanting to learn how to build professional web applications using Vue.js, then you’re going to love this video tutorial.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
25 Lectures
05:04:26
+
Creating a todo Application
6 Lectures 01:09:11

This video will give an overview of entire course.

Preview 03:35

The video gives you a better understanding how the todo application is going to look like. The video will show that it’s easy to add, remove, toggle, and edit a todo item.

Introduction to the todo Application
01:56

This video gives you a starting point to begin developing a Vue application. In this video, we will take a look at the Vue devtools for Google Chrome.

Setting Up Our Development Environment
06:37

This video will show how to implement the functionality of adding a todo.

Let’s Start by Adding todos
21:17

This video will show how to toggle and remove a todo.

Toggling and Removing a todo
12:10

This video will show you how it’s possible to edit a todo.

Editing a todo
23:36
+
GitHub Application
8 Lectures 01:43:05

This video gives you a better understanding of how the GitHub-application is going to look like. It will also show you how to search for a GitHub user with a given username.

Preview 03:23

The video gives you a better understanding about Vue CLI and how to create a new application.

Scaffolding Our Application
08:03

This video will give you a better understanding about how to configure Vue Router.

Setting Up Vue Router
14:54

This video will show you how they can perform AJAX-requests using Axios.

Setting Up Axios
11:21

This video will show how to install Vue Material and add it to the project.

Setting Up Vue Material
12:24

This video will show you how to respond to the change inside the text-input.

Making the Text-Input Working
12:47

This video will show you how to create a repositories table on the repositories page.

Creating the Repositories Table
20:11

This video will show you how to create a user-card for the GitHub user information. You will also learn how to create Vue components and import them correctly.

Creating the User Table
20:02
+
Real time Chat Application
11 Lectures 02:12:10

This video gives you a better understanding of how the chat-application is going to look like. The video will also show you how the results are displayed in real time.

Preview 06:24

This video will start with creating an entry point for the chat application. In this video, the server side of the application will be created.

Scaffolding Our Client and Server
09:18

In this video, we will add the necessary packages to our client. We will configure Vue, Socket.IO, Vue Router, and Vuex.

Adding Packages to Our Client
14:36

In this video, we will start by expanding our Vuex store. In the previous section, we stored the GitHub information on the root of the application. We are going to use the Vuex store as a central place to store this information.

Setting Up the Vuex Store
14:24

In this video, we will start by setting up our pages. We will touch route metadata to check if the user is logged in or not.

Setting Up Our Pages
07:35

In this video, we will add the basic functionality to our Join page. You will join a room with a given username and room name. The page will have a connection with the Vuex store to join a room.

Adding Functionality to the Join Page
05:48

In this video, we will begin and finish the styling for the join page. We will use the BEM standard for our CSS. We will also use a CSS reset file to make sure all the browsers show the CSS the same way.

Styling the Join Page
12:55

In this video, we will finalize the join page. We will refactor the created HTML elements to Vue components.

Finalizing the Join Page
19:55

In this video, we will add the functionality of creating a message to the room’s page. We need to fire events to the server and listen for events on the client.

Adding Functionality to the Room Page
09:23

In this video, we will finalize the room page. We will refactor the HTML-tree to reusable Vue components.

Finalizing the Rooms Page
23:42

In this video, we will finalize the application. We will tweak the pages a little bit and fix a couple of bugs. We need to scroll to the latest message, focus the input on changing the page, and more.

Final Tweaks
08:10
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,385 Students
616 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.