Vue.Js Web Development Guide

Learn to build beautiful web applications using Vue.js with hands-on practical projects

What you'll learn

Delve into Vue .js and learn the skills to create complete web applications and the nuances of the framework

Use modern development tools such as Webpack, vue-cli, hot reloading, and the vue devtools to develop modern web applications

Learn to build complete data-driven user interfaces

Get Introduced to Jest to understand test paradigms

Learn to create a music library (a mini Spotify) with Vue .js, the view-router, and using plugin components for Vue .js

Build a tracker for TV shows using the TVMaze API

Learn to build more complex applications and to share data across components by creating a simple web shop

Manage a real-time chat capability to integrate real-time communication with a backend service and build Vue .js applications with push capability

Requirements

Prior knowledge of JavaScript is assumed.

Description

Vue.js is a new JavaScript framework that has taken some of the best practices and features of the most popular JavaScript frameworks 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 who wants to level up your application development skills and build interactive applications with Vue.js, then go for this course.This course will show you how to build rich web applications quickly using Vue.js. You will begin by setting up the development environment for your applications. You will then explore various Vue.js concepts by building applications to implement your learnings into practice. You will learn to build and test real-world applications such as personal CRM application, To-Do app, Spotify-like music library app, TV shows tracker app, and more. As you progress, this course takes a project-based approach where every project will build up your Vue.js skillset.Contents and OverviewThis training program includes 4 complete courses, carefully chosen to give you the most comprehensive training possible.The first course, Learning Vue.js 2.0, will show you how to build high-performing, reactive web interfaces with Vue.js. You will start from scratch, learning how to build a “Hello World!” application in Vue.js and move towards building advanced applications. You will then learn various Vue,js concepts. You will also learn to use several modern tools such as Webpack, vue-cli, hot reloading, and vue devtools to develop modern web applications, focusing on the view layer to provide the most performant experience for users.The second course, Hands-On Web Development with Vue.js, will start in the simplest way possible so you can get up-and-running with Vue within minutes. You will understand the fundamentals of how to use a Vue instance and dig deeper into the Vue environment. Starting with vue-cli by building a personal CRM application with Vue libraries such as VueX and Vue Router. Learn the concepts of clean state management and testing Vue components using tools such as Jest along with vue-test-utils. Use child components with vue-test-utils. Finally, get the tips and tricks of working with Vue.js efficiently.The third course, Practical Projects with Vue JS 2, will walk you through three complete practical projects in Vue.js that show the breadth of the framework, and also show how it is used practically via real-world examples.The fourth course, Real World Projects with Vue.js, teaches you to build four projects. In your first project, you'll create a miniature Spotify-like music library to manage your song collection where you'll learn the basics of working with Vue.js, vue-router, and using plugin components. The next project builds a tracker for TV shows where you'll expand on our app-building experience by integrating an external API using the native fetch API. The third project is a simple web shop, which will introduce building more complex applications.You will add Vuex to your stack to share data and state across components. The last project is a real-time chat feature, with the ability to create, join, and manage various rooms. It will integrate real-time communication with a backend service, which we can use to build Vue.JS applications with push capability.By the end of this course, you will be able to build your own web applications using Vue.js.Meet Your Expert(s):We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:● Jonathan M Hethey has been writing code since the age of 14 and has actively participated in shaping and experimenting with the IT systems around him. After a short apprenticeship as an IT supporter, he completed his studies with a Bachelor degree in Web Development in Denmark. Since then he has been working as a teacher for young adults with autism and went on to work for agencies as a developer and is now a Full Stack Developer in Copenhagen.● Roman Kuba is a senior software engineer with a passion for efficient and clean code. Working professionally with Vue since 0.11. He has built multiple web apps and even transitioned a legacy code base from jQuery and Angular to Vue. Sharing knowledge has always been a defining part of his career, either by speaking at conferences or teaching students at a university.● Jack Herrington is a Principal Software Engineer at Nike working. He works in React, Vue, and AngularJS and has presented to a wide set of audiences on a variety of web technologies. He has written six books and hundreds of articles covering both the front- and back-end. Before Nike he was the UI Architect at Walmart Labs.● Daniel Khalil is the co-founder of Brainsware. He is a full-stack developer for 12 years now, self-employed freelancer since 2009. Most of his work lately is with Elixir (Phoenix) and Vue.js. He loves creating software that's usable, testable and maintainable.

Overview

Section 1: Learning Vue.js 2.0

Lecture 1 The Course Overview

Lecture 2 What Is Vue.js?

Lecture 3 Getting Started with Vue.js

Lecture 4 Using Vue.js to Create a “Hello, World!” Application

Lecture 5 Creating a Vue.js Project with npm and the Vue.js CLI

Lecture 6 In-Depth Explanation of the Vue Instance

Lecture 7 The Vue Instance Lifecycle

Lecture 8 What Is a Component and How Are They Used in Vue.js?

Lecture 9 Component Deep-Dive

Lecture 10 Basic Template Interpolation

Lecture 11 Directives in Vue.js Templates

Lecture 12 Working with Forms

Lecture 13 Explaining the .vue File Template

Lecture 14 Hot Reloading of Your App with Webpack

Lecture 15 Using Vue-Devtools to Make Debugging Easier

Lecture 16 Unit Testing a Vue.js Application

Lecture 17 Routing with the Vue Router Library

Lecture 18 Introduction to State Management with a Simple Source of Truth and Vuex

Lecture 19 Using Vuex to Manage State in a Vue.js App

Lecture 20 Reusing Logic and Data within an App with Mixins

Lecture 21 Reusing Logic and Data Across Multiple Apps with Plugins

Section 2: Hands-On Web Development with Vue.js

Lecture 22 The Course Overview

Lecture 23 Creating Your First Vue App

Lecture 24 Rendering Lists and Leveraging Computed Properties

Lecture 25 Improving the App with Custom Methods

Lecture 26 Exploring the Vue Lifecycle

Lecture 27 Distributing Content with Components

Lecture 28 Working with the Vue DevTools

Lecture 29 Building a Personal CRM

Lecture 30 Starting a New App with vue-cli

Lecture 31 Introducing Vue-Singlefile-Components

Lecture 32 Using External npm Packages

Lecture 33 Creating New Data on the Fly

Lecture 34 Routing between Datasets

Lecture 35 Understanding V-Model

Lecture 36 Using Two-Way Computed Properties

Lecture 37 Prioritizing Global State over Component State

Lecture 38 Building a Flux Store from Scratch

Lecture 39 Getting Started with Vuex

Lecture 40 Persisting Data in Local Storage

Lecture 41 Persisting Data with Firebase Firestore

Lecture 42 Introduction to Jest and Writing the First Spec

Lecture 43 Testing a Vuex Store

Lecture 44 Introducing vue-test-utils

Lecture 45 Testing Nested Components

Lecture 46 Introduction to Snapshot Testing

Lecture 47 Tying Up Loose Ends of Our Application

Lecture 48 Passing Data from the Outside into Vue

Lecture 49 Using Vue with an Existing Stack

Lecture 50 Using Vue Mixins and Plugins

Lecture 51 Preparing Your Next Steps

Section 3: Practical Projects with Vue JS 2

Lecture 52 The Course Overview

Lecture 53 Install Vue

Lecture 54 Why Components?

Lecture 55 Working with Data

Lecture 56 Directives – Iteration and Conditionals

Lecture 57 Events

Lecture 58 Slots, References, and Transitions

Lecture 59 Vuex

Lecture 60 Vuetify

Lecture 61 Introduction to Geo-Store

Lecture 62 Project Setup

Lecture 63 Adding GraphQL

Lecture 64 Creating the Vuex Store

Lecture 65 Adding the Map

Lecture 66 Adding the Toolbar

Lecture 67 Adding Store Info

Lecture 68 Introduction to You News

Lecture 69 Application and Database Setup

Lecture 70 Adding REST Endpoints

Lecture 71 Creating the Vuex Store

Lecture 72 Initial Layout and Left Nav

Lecture 73 Article Viewer

Lecture 74 Add Feed Dialog

Lecture 75 Adding WebSockets

Lecture 76 Local Storage

Lecture 77 Introduction to Photo Spot

Lecture 78 Creating the Server

Lecture 79 Creating the Models

Lecture 80 Creating the Vuex Store

Lecture 81 Getting File Upload Going

Lecture 82 Vuetify, Vue-Router, Layout, and Home Page

Lecture 83 Detail Page and Chat Window

Lecture 84 Integrating Pusher on the Server

Lecture 85 Integrating Pusher on the Client

Section 4: Real World Projects with Vue.js

Lecture 86 The Course Overview

Lecture 87 Setup and Requirements

Lecture 88 A Basic Music Index – Creating Our First Views and Routes

Lecture 89 Pagination and Splitting Up Components

Lecture 90 User Created Playlists – First Steps

Lecture 91 Adding Songs to Playlists

Lecture 92 Customizing and Managing Playlists

Lecture 93 In Search of Songs with Web Workers

Lecture 94 Setup and Requirements

Lecture 95 Integrating Fetch and Firebase

Lecture 96 Searching for Your Favorite Shows

Lecture 97 Detail Page for Shows

Lecture 98 Subscriptions So that You Will Never Miss a New Season

Lecture 99 Subscriptions So that You Will Never Miss a New Season (Continued)

Lecture 100 Setup and Requirements

Lecture 101 Administration and Authentication

Lecture 102 Managing Products

Lecture 103 Products on Display

Lecture 104 Vuex – Centralized State for Our Shop

Lecture 105 A Cart for Shopping

Lecture 106 Processing the Checkout

Lecture 107 Processing the Checkout (Continued)

Lecture 108 Setup and Requirements

Lecture 109 Registration and Authentication

Lecture 110 Sending Messages to a Single Room

Lecture 111 Creating and Joining Multiple Rooms

Lecture 112 User Lists and Kicking Users

This course is for web developers who want to develop stunning web applications using Vue .js.