Single Page Applications with Vue.js

Vue.js became quickly one of the most popular JavaScript frameworks. In this course, you'll create a Single Page Application from start to finish using this flexible, yet powerful framework.
Course info
Rating
(83)
Level
Intermediate
Updated
Oct 10, 2017
Duration
3h 11m
Table of contents
Course Overview
Environment Setup - Build Process
Single File Components
Routing
API Communication
State Management
Server-side Rendering
Testing
Deploying
Description
Course info
Rating
(83)
Level
Intermediate
Updated
Oct 10, 2017
Duration
3h 11m
Description

How can you create a full-blown application with one of the most popular JavaScript frameworks, Vue.js? In this course, Single Page Applications with Vue.js, you'll learn how to setup the environment and build processes necessary for your application. First, you'll discover how to include single file components, routing, and API communication functionalities with plugins and modules. Next, you’ll explore state management and server-side rendering for faster and more manageable apps. Lastly, you’ll cover how to create tests and deploy your application on the cloud. When you’re finished with this course, you’ll have the necessary knowledge to efficiently create an application from start to finish using the Vue.js framework.

About the author
About the author

Bill is a Microsoft MVP, Google Developer Expert, a Senior Software Engineer at Software Competitiveness International, and the creator of Dotnetweekly. He has over 7 years of experience in building Web Applications and is excited to learn and teach technologies as they develop/mature in the ever-changing world of the web.

More from the author
Getting Started with Progressive Web Apps
Intermediate
2h 12m
Nov 30, 2016
Working with Polymer.js Elements
Intermediate
1h 42m
Aug 16, 2016
More courses by Bill Stavroulakis
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, everybody. My name is Bill Stavroulakis, and welcome to my course on Single Page Applications with Vue. js. I am a front-end developer at Mesosphere. Vue. js quickly became one of the most popular JavaScript frameworks out there. In this course, we won't go over the fundamentals of the framework, but glue together its various components and plugins to construct, test, and deploy a single page application. Some of the major topics that we will cover include, creating a build process, single-file components, routing and communicating with an external API, state management, server-side rendering, testing and deploying our application. By the end of this course, you'll know how to set up, build, test, and deploy a single-page application with Vue. js. Before beginning the course, you should be familiar with the Vue. js library. I hope you'll join me on this journey to learn about creating your full-blown, modern web application from start to finish with the Single Page Applications with Vue. js course, at Pluralsight.

Environment Setup - Build Process
Hi, this is Bill Stavroulakis, and welcome to this course on Single Page Applications with Vue. js. Vue. js is a progressive JavaScript framework. This 18-kb library can be used as a small, unobtrusive way to conduct simple operations on our websites such as data binding and DOM manipulation like jQuery and Knockout, all the way up to constructing full-blown, modern single page applications like Angular and Ember. In this course, we won't go over the fundamentals of the framework, but glue together its various components and plugins to construct, test, and deploy a single page application. In this module, we won't see Vue. js in full action quite yet. In modern single page applications, the environment setup and the build process is a crucial factor of the development cycle. Vue. js isn't any different, and we'll set up the necessary tools and foundry to build our application upon.

Single File Components
A very exciting feature of the Vue. js library is single file components. In Vue, we can create single file components so we can separate our HTML, CSS, and JavaScript code, and transform our data more efficiently during our build process, but keep everything scoped and in one place at the same time. This is very similar to the polymer. js library's web component declaration. In this module, we'll create single file components to scope, organize, and reuse parts of our code.

Routing
An important piece of the puzzle while creating single page applications is routing. How can we load different pages through different routes and load only the resources that are necessary per page? We will tackle this problem in this module.

API Communication
The shell of our application is all set; however; if we don't communicate with an API, our client application is destined to oblivion. In this module, we'll send data back and forth to our back-end server and see how can we handle requests and responses.

State Management
As our application grows larger and more complex, we quickly realize that sharing state between our components and throughout our app becomes a beast of its own. We are already using some state management techniques such as creating a post component and injecting the state from the category component. However, what will happen if we want to share state not directly from parent to child, but from a child to another child or from a child to another element anywhere else in the DOM tree? However, how can we make sure that the object that we are sharing is updated correctly and immediately every time it changes from one component to all the others? We will tackle this interesting issue in this module.

Testing
Automated testing has become an integral part of development. There are various tools and strategies in which we can test our application. In this module, we'll cover unit tests with our Vue components. We won't cover integration testing, which is testing how components work together, or UI testing, where we would automatically test the end result of our application in the browser. Unit tests are the most common tests that you'll create as a developer, and the basis to build the other testing types as well.

Deploying
In this module, we will polish our application and make it ready for distribution to the masses. It is time for the world to see our beautiful Vue. js application.