Vue.js Essential Training

Create and host a full-stack site from scratch. Learn how to set up a front end using Vue.js, set up a back end using Node.js and MongoDB, and take your site live.

Introduction

• Vue.js
• Codespaces
• What you should know
• Installing Node.js and NPM
• What to expect from this course

1. Creating a Vue.js Front End

• Why Vue?
• Setting up and running a Vue project
• Vue project structure
• Creating application pages
• Routing in Vue
• Adding data, styles, and images
• Creating a products page
• Creating a product detail page
• Creating a shopping cart page
• Creating a navigation bar
• Linking to the product detail page
• Creating a 404 page in Vue
• Using modular components
• Challenge: Modular components
• Solution: Modular components

2. Creating a Node Back End

• Why Node.js?
• Setting up an express server
• Testing servers with Postman
• Creating routes in Express
• Using nodemon to restart a server
• Creating server data
• Deleting server data
• Rewriting the shopping cart

3. Adding MongoDB to Your Back-end

• Why MongoDB?
• Setting up MongoDB
• Connecting and adding data to MongoDB
• Adding MongoDB to a Node.js server
• Adding MongoDB to GET endpoints
• Loading individual products from MongoDB
• Creating data in MongoDB
• Deleting data in MongoDB

4. Connecting the Front- and Back-end

• Introduction to the Axios library
• Loading data from the server: Part 1
• Loading data from the server: Part 2
• Adding items to the shopping cart
• Removing items from the shopping cart
• Challenge: Item already in cart
• Solution: Item already in cart

5. Adding Authentication with Firebase Authentication

• Why Firebase Authentication?
• Creating a Firebase project
• Sending Firebase Auth email links
• Logging in with an email link
• Listening for auth state changes
• Signing the user out
• Managing cart items with authentication

6. Hosting Your Site

• The release process
• Preparing the front-end for release
• Releasing the app

Conclusion

• Recommended next steps