Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Vue.js: Creating and Hosting a Full-Stack Site

via LinkedIn Learning

Go to class Write review
Coursera Ad

Coursera Plus Annual Nearly 45% Off

Learn More → Datacamp Ad

PowerBI Data Analyst - Create visualizations and dashboards from scratch

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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 host your site on Heroku.

Syllabus

Introduction
  • Create and host a full-stack site with Vue.js
  • What you should know
  • Install Node.js and npm
  • What to expect from this course
1. Create a Vue.js Front End
  • Why Vue?
  • Set up and run a Vue project
  • Vue project structure
  • Routing in Vue
  • Add data, styles, and images
  • Create a product page
  • Create a product detail page
  • Create a shopping cart page
  • Create a navigation bar
  • Create a 404 page in Vue
  • Use modular components
  • Challenge: Modular components
  • Solution: Modular components
2. Create a Node Back End
  • Why Node.js?
  • Set up an Express server
  • Test servers with Postman
  • Route parameters in Express
  • Get data from a server
  • Use Nodemon to restart a server
  • Create and delete server data
3. Add MongoDB to Your Back End
  • Why MongoDB?
  • Download and install MongoDB
  • Add MongoDB to a Node.js server
  • Add MongoDB to GET endpoints
  • Create data in MongoDB
  • Delete data in MongoDB
4. Connect the Front End and Back End
  • Introduction to the axios library
  • Load data from the server, part 1
  • Load data from the server, part 2
  • Add items to the shopping cart
  • Improve the add-to-cart interface
  • Remove items from the cart
  • Challenge: Item already in cart
  • Solution: Item already in cart
5. Host Your Site
  • The release process
  • Build and serve a Vue front end
  • Set up Heroku and MongoDB
  • Use environment variables in Heroku
  • Push code to Heroku
Conclusion
  • Next steps

Taught by

Shaun Wassell

Reviews

4.8 rating at LinkedIn Learning based on 67 ratings

Start your review of Vue.js: Creating and Hosting a Full-Stack Site

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.