Skip to content
Search upcoming classes
Course Name
Get $250 OFF select training courses for a limited time with code CPL250.*
*Offer available until 12/31/2020. Some exclusions apply. Not valid for eLearnings, SAFe®, or Scrum Certification courses.

Vue.js Boot Camp

It seems that every week there's a new JavaScript framework that someone has created. Some fall out of favor, while others build momentum and a loyal community. Undeniably, Vue.js has taken the latter path. Although there could be many reasons for this, one big factor is simplicity. You can get started and use as many or as few features as you need. It's also lightweight and doesn't need as much formality as other frameworks do. In fact, you can get started by adding one line of code to your HTML page.

In this Vue.js course, you’ll build a simple web application using many of the fundamental features of the framework. You'll also get to work with a more complex application to experience features beyond basic syntax. This app will show you how mature teams implement best practices so they can create scalable and robust web applications.

This course is for developers and teams who want an introduction to Vue.js that will leave them feeling capable in just a few days.

Available formats for this course
Live Online
Corporate Online
2 days/16 hours of instruction

Part 1: Your First Vue.js App

For the first section of training, we'll build a simple to-do application using commonly used Vue.js features. We'll switch between lectured instruction and hands-on coding to implement the functionality. This will give you practice adding common functionality and give you confidence in exploring further topics.

  1. Start with the basics
    • Why Vue.js?
      • What are the benefits?
      • A comparison to other JS frameworks
      • Meet the community
    • A review of the different ways a Vue app can be started
      • Adding Vue.js library
      • Using a build tool
    • Learn about the development vs. production version
    • Create an instance of Vue

Exercise: Set up a basic Vue web app

  1. Add data to your to-do application
    • Learn about the data object
    • Mustache syntax: use this simple syntax to display data
    • One-way vs. two-way binding
    • Directives: step up your game with these v-attributes
      • Built-in
      • Custom
      • Arguments
      • Modifiers
    • Forms and user input
      • Model directive: use this directive to create two-way data bindings
      • Add validation

Exercise: Create an outline of your to-do app and add an input field.

  1. Add functionality with methods
    • Create and call methods and functions
    • Provide arguments
    • Apply filters

Exercise: Display your input as text

  1. Handle user events
    • Types of events
    • Event modifiers
    • Key modifiers

Exercise: Use one-click events to check off items on the to-do list

  1. Combine data and functions
    • Use templates to separate concerns
    • Create loops
    • Render lists
    • Display using conditionals
    • Inject content using slots

Exercise: Enhance your to-do list with loops and conditionals

  1. Modularize your code with components
    • Find out what components can do for you
    • Learn about component scope
    • Use properties to share data between components

Exercise: Refactor your app to create components

  1. Style your application
    • Class bindings
    • Style bindings
    • Conditional style

Exercise: Add conditional style to your list based on events

  1. Unit test your Vue.js application
    • Make your code testable
    • Review tools like Karma and Mocha

Exercise: Write basic tests that confirm functionality 


Part 2: Real-World Applications

For the second part of training, we'll identify what large-scale applications do to get the most out of Vue.js. We'll be looking at an application that has some of these features already. Then we'll add new features injected at the right time using the Vue.js Lifecycle. And we'll investigate uses for Vuex and Vue Router. We'll also discuss best practices that companies use to make sure their application is maintainable and has proper test coverage. To top it off, we'll learn how to debug our applications using Vue Dev Tools.

  1. Leverage Node.js, NPM, and Webpack
    • Learn the benefits of these tools

Exercise: Install and run the sample application

  1. Use the Vue.js Lifecycle
    • Review lifecycle terms like “mounted” and “updated”

Exercise: Invoke functionality at the right time

  1. Communicate between components by emitting events

Exercise: Change data communication from property-based to event-based

  1. Manage environment properties
  2. Route your customers with Vue Router
  3. Maintain state with Vuex

Exercise: Change data communication between components from property-based to state-based

  1. Debugging with Vue Dev Tools
    • Debugging your sample application
    • Use Vue Dev Tools to learn how others have put together their applications
  2. Learn Vue.js Best Practices
    • Structure your Vue app like the pros
    • Keep code modular
    • Separate display and business logic
    • Get ready to deploy to production
  3. Run apps using Vue CLI
    • Get an application up and running quickly
    • Use plugins for adding features

This Vue.js course is perfect for anyone looking to access the full potential of the JavaScript framework by learning both the fundamental features and advanced applications. Some roles that would find this course beneficial include:

  • JavaScript Developers
  • Web Developers
  • WordPress Developers
  • Front-end Developers
  • UI/UX Designers

Vue.js Boot Camp Schedule

There are currently no scheduled classes for this course. Please contact us if you would like more information or to schedule this course for you or your company.

Learn more about corporate team training