Full-Stack Vue with GraphQL - The Ultimate Guide
4.4 (434 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,531 students enrolled

Full-Stack Vue with GraphQL - The Ultimate Guide

Build a complete Pinterest-inspired full-stack app from scratch with Vue, GraphQL, Apollo 2, Vuex, and Vuetify
4.4 (434 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,531 students enrolled
Created by Reed Barger
Last updated 12/2019
English [Auto]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 46 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn in-depth how to use Apollo Server 2 and Apollo Boost to create powerful full-stack apps
  • Learn how to handle errors on the client and server with Apollo / GraphQL
  • Be able to implement session-based JWT authentication to GraphQL applications
  • Integrate Apollo with Vuex for more reliable and scalable state management
  • Implement infinite scrolling functionality using Vue-Apollo
  • Deploy full-stack JavaScript / GraphQL applications using Heroku and Netlify
  • Learn how to write queries and mutations in the GraphQL language on both the client and server
  • Utilize many useful MongoDB methods and features
  • Create attractive, sophisticated UIs using the Vuetify component framework
  • Use the best in ES6 - ESNext features like async / await, destructuring, spread operators, arrow functions, etc
Course content
Expand all 82 lectures 09:55:53
+ What is GraphQL / Apollo? (Optional)
2 lectures 22:47
What is GraphQL? Using the SWAPI GraphQL API
What is Apollo?
+ Connect to MLab Database, Create Mongoose Models and GraphQL TypeDefs
6 lectures 50:17
Create MongoDB Atlas Database, Connect to GraphQL Server
Creating Mongoose Schemas
Creating typeDefs for Project
Write and Run signupUser Mutation
Write and Run addPost Mutation
Write and Run getPosts Query, Intro to populate
+ Create Vue Frontend with Vue CLI 3
8 lectures 56:52
Create Vue Client with Vue CLI 3
Adding Plugins with Vue GUI and Concurrently Dev Script
Structuring our Vue App
Installing Vuetify Plugin and Generating a Theme
Coolors.co for Creating Great Color Schemes (Optional)
Horizontal Navbar and Mobile First Design
Add Side Navbar
Add Routing and Page Transitions
+ Using Vue Apollo
4 lectures 23:55
Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
Dive into Smart Queries in Vue Components
Executing Queries with the ApolloQuery Component
Add Carousel Component to Home Page
+ Integrate Vuex with ApolloClient
4 lectures 22:54
Firing getPosts Action with Vuex
Using Mutations and Getters
Add Loading Property, Loading Spinner and mapGetters
Create queries.js for Clientside Query / Mutation Definitions
+ JWT Authentication for Signin / Signup
12 lectures 01:26:33
Create Gravatar Avatar and Hash User Passwords on Signup
Write and Run signinUser Mutation
Sign Token and Return it Upon Signin/Signup
Using Variables in GraphQL, Signin / Signup Mutation Defs
Add Signin Form, Write and Run signinUser Action, Return JWT
Additional Config for ApolloClient, Send Token from LocalStorage
Verify JWT Token in server.js, Pass Result to currentUser in Context
Create getCurrentUser Query, Execute it from main.js
Redirect Home upon Signin with Watcher
Change Navbar for Signed-in User
Create Signout Action
Protected Routes and Clearing Malformed Tokens
+ Error Handling and Form Validation
6 lectures 43:21
Add Loading Spinner to Signin Button
Form Validation with Vuetify in Signin Component
Show AuthSnackbar on Signin / Signup
Handle Authentication Errors, Show Auth Error Snackbar
Create Signup Form and Signup User Action
+ Add Post / Infinite Scroll Components
6 lectures 57:36
Make Add Post Form
Create and Execute addPost Action / Mutation
Update and Optimistic Response for addPost Mutation
Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
Add Infinite Scroll Functionality on Client
Add Grid Layout / Cards for Each Post in Posts Component
  • A basic familiarity with Vue
  • A basic understanding of ES6 JavaScript will help, but it's not required

Includes Apollo Server 2, Apollo Boost and the Vue CLI 3!

Interested in building next-level apps with Vue and GraphQL? Look no further than this course!

This course is your one-stop guide to learning...

  • Complete CRUD functionality (create, read, update, and delete) with Vue and GraphQL / Apollo 2

  • The latest and greatest Apollo tools: Apollo Server 2, Apollo Boost and Vue Apollo

  • Using the new Vue CLI 3 to create/scaffold Vue apps, add plugins and deploy to the web

  • GraphQL Syntax, including types (scalar/object), and creating schemas with typeDefs

  • Writing and executing GraphQL queries and mutations on both the client and server

  • Essential Apollo features  such as the update function, optimistic responses, and refetching queries

  • Error handling with Apollo Server 2 with the new AuthorizationError and formatErrors features

  • User authentication with JSON Web Tokens

  • State management with Vuex, in concert with ApolloClient

  • Stunning UIs with Vuetify, a Material Design Component Library for Vue

  • Form Validation with the help of Vuetify

  • Vue Router (including protected routes, page transitions, router props, and dynamic segments)

  • Building resolvers using many MongoDB methods and operators

  • Search Functionality with MongoDB

  • Advanced GraphQL features such as infinite scrolling

  • GraphQL shorthands to make our schemas and queries concise, such as inputs and fragments

  • Lots of work with the Chrome/Firefox Vue Dev Tools Extension to Debug Vue / Vuex / Apollo

  • Using the service Now to deploy Vue / GraphQL Apps

  • Advanced UI tricks, including notifications and loading skeletons

  • App Deployment with Heroku and Now v2

  • And more...

What will we be building? What is the course based on?

This entire course within the context of a practical application that we will build literally from the first line of code to live deployment on the web.

We'll be building an image-sharing social application called VueShare, similar to that of Pinterest or Instagram. Authenticated users of our app will be able to like and unlike, share, comment on, search for, edit, and delete image-related posts.

How does the course develop as we go along?

In the beginning of the course, we'll cover the basic GraphQL / Apollo concepts that we need to get started, then dive into building our app. We'll build out our backend, cover creating a GraphQL server and database (hosted by MongoDB Atlas), and how to write resolver functions with MongoDB. Then we'll move over to the frontend, create our Vue app and connect it with our backend, develop an interface and build client-side functionality with Vue, Vuetify, and Vue Apollo / Vuex. We'll learn how to write and execute queries and mutations using Apollo to our backend to get and modify what we need. Once we cover and integrate all the essential features of our application (listed above), we'll move on to deploying our app to the web. After deployment, for those who want to stick around and make their app truly production-ready, we'll cover a number of cool features to make our app more functional, attractive and reliable.

I wanted to make this course as comprehensive as I could, but also give you the fast track to learning new technologies in an engaging way. GraphQL is an exciting new technology in the web development community and new Apollo releases such as Apollo Server 2 and Apollo Boost have made working with GraphQL easier than ever.

There's never been a better time to start working with GraphQL, especially as a JavaScript developer. Join me and let's get started!

Who this course is for:
  • Anyone who wants to learn how to build full-stack applications with Vue and GraphQL!