O'Reilly logo
live online training icon Live Online training

Building web apps with Vue.js

Build highly interactive websites quickly and easily

Raju Gandhi

Vue.js—the new kid on the JavaScript framework block—has taken the world by storm and recently surpassed React's star count on GitHub. Much like React, Vue aims to be a superfast view rendering library and provides just enough support to get developers productive. However, Vue goes further than React by offering an idiomatic approach to state management (via Vuex), and routing using Vue Router as add-on libraries.

In this three-hour hands-on training course, expert Raju Gandhi walks you through building a full application using Vue. You'll start with the basics before moving on to writing custom components, using Vuex for state management, and using the Vue router to enable routing within your application. You'll leave with the experience you need to get quickly started on your next project in Vue or dive into an existing code base.

What you'll learn-and how you can apply it

By the end of this live online course, you’ll understand:

  • How Vue works
  • How to get started quickly on your next project using Vue
  • How to compose your applications using components and have them communicate with each other using Vue’s unidirectional data-flow
  • How to use Vuex for state management and the Vue Router to set up routes for single-page applications

And you’ll be able to:

  • Assess if Vue is a good fit for your existing or new projects
  • Get started and get productive with Vue quickly
  • Understand the Vue ecosystem

This training course is for you because...

  • You’re a developer looking to use Vue in an existing or new project, whether in just one part of your application or a full-blown single-page application (SPA).
  • You're a technical lead attempting to assess if Vue is the right framework for your team.
  • You work with other frameworks like React and Angular and want to learn how Vue is different and what it offers.

Prerequisites

    • Comfort working with HTML, CSS, and JavaScript ES6+ in the code editor of your choice
  • The ability to clone a Git repository locally and run a local web server
  • A basic understanding of how single-page applications work

Recommended preparation:

Recommended follow-up:

About your instructor

  • Raju Gandhi is a programmer, consultant, speaker, trainer, and all-around nice guy. He has worked in the software industry for over 15 years and has experience in both government and private sectors. Raju is a practitioner of both Agile and DevOps methods as well as good programming and architectural patterns and believes that finding the right balance between such practices will allow us to deliver software that our customers cherish. He is also a strong advocate of functional programming and a proponent of immutability across both software and hardware. Raju is a regular speaker at conferences around the country (and occasionally around the world) and has routinely participated in the No Fluff, Just Stuff tour. In his spare time, you will find Raju reading, playing with technology, or spending time with his wonderful (and significantly better) other half.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Web components and the future of the web (25 minutes)

  • Lecture: Web components and what they're made of
  • Q&A

Vue.js beginnings (25 minutes)

  • Hands-on exercise: Explore Vue and the Vue instance; mount an application; implement incremental interactivity and reactivity using Vue
  • Q&A
  • Break (10 minutes)

Single file components; component hierarchies (25 minutes)

  • Lecture: Understanding a Vue CLI-generated project setup
  • Hands-on exercise: Write a single file component (SFC); build a component hierarchy
  • Q&A

Intercomponent communication (25 minutes)

  • Hands-on exercise: Work with props; emit custom events
  • Q&A
  • Break (10 minutes)

AJAX and communicating with the backend (20 minutes)

  • Hands-on exercise: Use HTTP GET and PUT using a third-party library (Axios); refactor to improve project organization and better reusability
  • Group discussion: Smart components versus dumb components
  • Q&A

Routing (20 minutes)

  • Hands-on exercise: Pull in Vue Router; declare routes; navigate within your application
  • Q&A

Next steps (10 minutes)

  • Lecture: The Vue CLI; resources
  • Hands-on exercise: Use Vue dev tools

Wrap-up and Q&A (10 minutes)