Vue.js Training

Vue.js Training Courseware (VUE101)

The course provides a comprehensive introduction to Vue 3, a popular JavaScript framework for building user interfaces. The course covers essential Vue features, such as components, data binding, directives, and transitions, as well as advanced topics like routing and animations. By the end of the course, students will be able to create a fully functional Vue.js application from scratch.

Publisher: Webucator


  • Comprehensive Curriculum: The course covers both fundamental and advanced Vue.js concepts, ensuring that students gain a thorough understanding of the framework.
  • Hands-on Exercises: Interactive exercises and practical examples are provided throughout the course, allowing students to apply their knowledge and solidify their learning.
  • Engaging Project: The course includes a real-world project, Mathificent, which helps students understand how to apply Vue.js concepts in a practical setting and keeps them engaged.
  • Clear Learning Path: The course is organized into clear sections and topics, making it easy for trainers to plan their lessons and guide their students through the learning process.


  1. Getting Started with Vue 3
    1. Unpacking Vue 3
    2. Vue 3 Hello, World! (Exercise)
    3. Introducing Our Project: Mathificent
    4. Get Started with vue-cli (Exercise)
    5. Learning the Structure of a Vue App (Exercise)
  2. Basic Vue Features
    1. The Vue Instance
    2. Writing Vue Templates
    3. Writing Templates (Exercise)
    4. Using Components Inside Components
    5. Breaking an App into Components (Exercise)
    6. Passing Data to Child Components
    7. Dynamic Data in Templates
    8. Computed Properties
    9. The data and method Objects
  3. Directives
    1. Directives
    2. Conditionals with v-if / v-else-if / v-else
    3. Two-way Binding with v-model
    4. One-way Data Binding, Repeating, and Event Handling
    5. Emitting Custom Events
  4. Implementing Game Logic
    1. Passing Data Between Components (Exercise)
    2. Vue Data Binding (Exercise)
    3. Implementing Conditional Rendering (Exercise)
    4. Improving the Form Layout (Exercise)
    5. Making the Game UI (Exercise)
    6. Capturing Form Events (Exercise)
    7. Setting the Equation (Exercise)
  5. Transitions and Animations
    1. Using the transition Component
    2. Adding the Timer (Exercise)
    3. Adding Transitions (Exercise)
    4. Catching Keyboard Events (Exercise)
  6. Vue Routing
    1. Routing
    2. Routing with Vue Router
    3. Implementing Routes (Exercise)

Required Prerequisites

  • HTML
  • JavaScript
  • Basic CSS