Web Applications with Vue.js, Node.js, and MongoDB (MEVN100)

Course Length: 5 days

Delivery Methods: Available as private class only

Course Overview

In this 5-day course, students will start with an optional review of advanced JavaScript, followed by the fundamental concepts and structures of Vue.js development. Students will use Vue.js to build a real-world frontend application through a series of hands-on labs.

In the 2nd part of the course, students will learn the fundamentals using Node and Express to build an API for the Vue frontend application using a MongoDB database.

Students will then connect the Vue frontend with the Node.js backend.

Professional Vue.js is a complete introduction to modern full-stack development. It covers the syntax, conventions, and best practices of modern JavaScript development while also teaching Vue.js, Node.js, and MongoDB. Through a series of hands-on exercises and demonstrations, students will learn how to develop and test complete Vue/Node/Mongo applications.

Course Benefits

After taking this course, students will be able to:

Install, configure, and use modern web tooling
Create test suites for Vue
Understand what Vue.js is and what problem it solves
Know the basic architecture of a Vue.js application
Build a Single Page Application with Vue Router
Use Pinia for maintaining state in a Vue.js application
Use Vue best practices
Know how to code web applications and RESTful APIs with Node.js
Connect Node.js to MongoDB

Course Outline

Basic JavaScript (optional)
1. How JavaScript Works
2. JavaScript Syntax
3. JavaScript Data Types
4. JavaScript Primitives
5. Variables and Arrays
  1. Creating and Using Variables
6. Variable Scoping with const and let
  1. Creating and Using Arrays
7. JavaScript Operators
8. Template Literals
9. Functions
10. Arrow Functions
11. JavaScript Objects
12. Prototypal Inheritance
Advanced JavaScript (optional)
1. Default Parameter Handling
2. Rest Parameter
3. Spread Operator
4. Tagged Template Literals
5. Enhanced Object Properties
6. Property Shorthand
7. Method notation
8. Array Matching
9. Object Matching
10. Symbol Primitive
11. For-Of Operator
12. Creating and Consuming Generator Functions
13. Class Definition
14. Class Inheritance
15. Understanding this
16. Array.map()
17. Array.filter()
18. Array.reduce()
19. Promises
20. Async / Await
TypeScript Basics
Vue QuickStart
1. What is Vue.js?
2. Vue vs React and Angular
3. Virtual DOM
4. What's New in Vue 3
5. Two ways to write Vue Components
  1. Options API
  2. Composition API
6. Code Editors and IDEs
7. Volar extension
8. Lab 01: Vue 3 Quick Start
9. Lab 02: Your First Component
10. Lab 03: Create More Components
11. Lab 04: Testing Vue
12. Lab 05: Manual In-Browser Testing and Debugging
13. Getting Started With Vue.Js
14. Basic Vue.Js Features
15. Creating and Mounting a Vue App
16. Configuring an App
17. Which Style Should You Use?
18. Vue Templates
  1. Using HTML in Templates
  2. Using JavaScript in Templates
19. Vue.js Directives
  1. Directive Arguments
  2. Directive Modifiers
  3. Vue.js Default Directives
  4. Custom Directives
20. Loops and Lists
  1. Using key
  2. Using v-for
  3. v-for with Arrays
  4. v-for with Objects
21. Conditional Rendering
  1. v-if vs. v-show
22. Lab 06: Static Version
23. Using Filters
  1. Formatting Currencies with Filters
  2. Formatting Dates with Filters
24. Binding HTML Classes
25. Adding Styles Conditionally
26. Binding Styles
27. Lab 07: Styling Vue Components
28. Computed Properties
  1. Benefits of Computed Properties
  2. Filtering / Sorting a List with a Computed Property
  3. Using Setters in Computed Properties
  4. Lab 08: Computed Properties
29. Vue State
  1. Vue Instance's data object
  2. ref() and reactive()
  3. Using ref()
  4. Using reactive()
  5. Vue.js Data Binding
  6. v-bind directive
  7. Value Binding
  8. 2-way Binding
  9. v-model directive
  10. Mutating Arrays
  11. Array Mutations Vue Can't Detect
  12. Object Mutuation Vue Can't Detect
  13. v-bind shorthand
30. Vue with TypeScript
  1. Lab 09: Methods and State + TypeScript
31. Event Handling
  1. Inline Event Handling
  2. Event Handling with Methods
  3. Event Modifiers
  4. v-on shorthand
  5. Listening to Child Component Events
  6. Emitting a Value With an Event
  7. Lab 10: Events
32. Watchers
  1. Async Operations with Watchers
33. Vue Instance Lifecycle
  1. Using Lifecycle Hooks
  2. Lab 11: Component Lifecycle
34. Vue and Forms
  1. Input Bindings
  2. 2-way Binding Pros and Cons
  3. Creating a Form with Checkboxes
  4. Creating a Form with Radio Buttons
  5. Creating a Form with a Select Element
  6. Input Modifiers
  7. Lab 12: Forms
35. Vue Components
  1. What are Vue Components?
  2. Creating a Component
  3. Organizing and Reusing Components
  4. Naming Components
  5. Global Components
  6. Local Components
  7. Global vs. Local
  8. Passing Data
  9. Using Props
  10. Single Root Element
  11. Using v-model on Components
  12. v-model and components
36. Content Distribution with Slots
  1. Lab 13: Slots
37. Loading Your Components Asynchronously
38. Lab 14: Composition API
39. Introducing Pinia
  1. Defining a Store
  2. Pinia Store Example with Options
  3. Pinia Store Example with Composition
  4. State
  5. Getters
  6. Actions
  7. Lab 15: Pinia
40. Single-Page Applications
  1. Creating an SPA with Vue-Router
  2. Vue-Router Template
  3. Vue-Router JS
  4. Lab 16: Routing
41. Lab 17: AJAX with Pinia
42. Transitions and Animations
43. Custom Transition Classes
44. Optional Lab: Transitions and Animation
Intro to Node.js
1. What is Node.js?
2. How Does Node.js Work?
3. Blocking code
4. Non-Blocking code
5. V8 JavaScript Engine
6. Node's REPL
7. Running a Node.js program
8. Lab 18: Basic Setup
9. Callbacks
10. Modules Overview
11. CommonJS Example
12. Using Modules
13. Modules vs. Packages
14. Sources of Modules
15. Node's Core Modules
16. Buffer Objects
17. Modularizing Your Code
18. Returning Values from Modules
19. Using a Local Module
20. Optional Lab: Creating Modules
21. ES6 Modules
22. events and Streams
23. Non-blocking with Events
24. Events
25. Node Stream Objects
  1. Using Readable Streams
  2. Using Writable Streams
  3. Other Streams
  4. Optional Lab: Working with Streams
26. The pipe method
  1. Optional Lab: Piping Between Streams
27. The process Object
28. Command Line Arguments
  1. Optional Lab: The process object
29. Understanding Callbacks
30. Using Node's Error Convention
31. Node on the Web
  1. How the Web Works
  2. HTTP
  3. HTTP Methods
  4. RESTful Web Services
Using Express
1. What is Express?
2. Getting Started with Express
3. Routing with Express
4. Serve Static Content with Express
5. Route Methods
6. Lab 19: Routing
7. Lab 20: More Routing
8. Express Middleware
9. Creating Endpoints
10. Using the next object
11. The res object
12. Route Parameters
13. Lab 21: The req and res Objects
14. Lab 22: Implementing the GET method
15. Lab 23: Implementing the POST method
16. Lab 24: Implementing the DELETE method
17. Lab 25: Implementing the PUT method
18. Lab 26: Middleware
Database Access with Node.js
1. Using an Object Data Model (ODM) or an Object Relational Model (ORM).
2. Mongoose
3. mongod and mongo
4. Lab 27: Vue and Mongo

Class Materials

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

Class Prerequisites

Experience in the following is required for this Vue class:

HTML, CSS, and prior programming experience

Experience in the following would be useful for this Vue class:

JavaScript, databases

Live Private Class

Private Class for your Team
Live training
Online or On-location
Customizable
Expert Instructors

Request Proposal