Vue Private Self-Paced

Introduction to Vue.js Training (VUE105)

Course Length: 2 days

Master the fundamentals of modern frontend development with Vue.

Request Private ClassRegister Self-Paced
Introduction to Vue.js Training

Register or Request Training

  • Private class for your team
  • Live expert instructor
  • Online or on‑location
  • Customizable agenda
  • Proposal turnaround within 1–2 business days
Request Proposal
Price per student
$99.90 or 6 vouchers
  • On Demand 24/7
  • Readings, Video Presentations, Exercises
  • Quizzes to knowledge check
  • Life-Time Access
Register Now

Course Overview

Master the fundamentals of modern frontend development with Vue.js, one of today’s most popular JavaScript frameworks. In this hands-on course, you’ll learn how to build fast, reactive, and maintainable single-page applications using Vue 3 and Vite.

Start with the basics of Vue’s reactivity system, directives, and data binding, then progress to building components, managing state, and organizing your app with the Composition API. You’ll also dive into advanced features like props, lifecycle hooks, slots, and dynamic components.

Through the guided pet adoption website project, you’ll apply your skills to create a fully functional single-page application complete with routing, filtering, and interactivity. Whether you’re a beginner or a seasoned developer exploring modern frameworks, this course will give you the practical experience to start building scalable web applications with Vue.js.

Course Benefits

  • Learn the fundamentals of Vue.js.
  • Experience easy integration with modern development workflows using Vite.
  • Develop dynamic, reactive applications quickly and smoothly.
  • Explore dynamic styling techniques that enhance user interface design.
  • Achieve better code organization through reusable components.
  • Gain a solid understanding of Vue Routing for smooth navigation experiences.
  • Practical project experience with the PetVue project, reinforcing learning outcomes.
  • Improve your problem-solving skills and apply them to real-world scenarios.

Delivery Methods

Private Class
Delivered for your team at your site or online.
Self-Paced
Learn at your own pace with 24/7 access.

Course Outline

  1. Overview and Introduction to Vue.js
    1. Introduction to Vue.js
    2. Different Uses of Vue
    3. Introduction to Vue Components
    4. Composition API vs Options API
    5. Course Project Introduction: PetVue
  2. Setting Up Vue with Vite
    1. SPAs with Vue and Vite
    2. Scaffolding a Vue Project with Vite, Part 1 (Exercise)
    3. Scaffolding a Vue Project with Vite, Part 2 (Exercise)
  3. Basic Vue Reactivity
    1. Understanding Reactive Data
    2. Exploring Computed Properties
    3. Events and v-on
    4. v-bind
    5. Introduction to v-model
    6. Building a Pet Adoption Filter System (Exercise)
  4. Conditionals and Loops
    1. Introduction
    2. Understanding v-if and v-show in Depth
    3. Using v-for for Iteration
    4. Displaying and Filtering the Pets (Exercise)
  5. Components
    1. Component Basics
    2. Component Lifecycles
    3. Props
    4. Component events
    5. Composables
    6. Advanced Component Features: slots and dynamic components
    7. Breaking PetVue into Components (Exercise)
  6. Vue Routing
    1. Vue Router Basics
    2. Nested Routes and Dynamic Routing
    3. Programmatic Routing
    4. Adding Routes to PetVue (Exercise)

Class Materials

Each student receives a comprehensive set of materials, including course notes and all class examples.

Class Prerequisites

Experience in the following is required for this Vue class:

  • Basic knowledge of HTML, CSS, and JavaScript
  • Familiarity with modern JavaScript features (ES6+)
  • Familiarity with a text editor or IDE (e.g., Visual Studio Code)

Have questions about this course?

We can help with curriculum details, delivery options, pricing, or anything else. Reach out and we’ll point you in the right direction.

Contact us