Full-Stack Vue with GraphQL - The Ultimate Guide

9h 52m 3s
English
Paid

Embark on a transformative journey by building a full-stack Vue application with GraphQL from scratch. This course is designed to guide you through the entire development process, culminating in the deployment of a fully functional image-sharing app called VueShare. Whether you're seeking to enhance your skills or dive into the world of Vue and GraphQL, this course covers all aspects of modern app development.

Course Overview

Includes Apollo Server 2, Apollo Boost, and the Vue CLI 3!Dive into next-level app development with Vue and GraphQL as we explore:

  • Complete CRUD functionality with Vue and GraphQL / Apollo 2
  • The latest Apollo tools: Apollo Server 2, Apollo Boost, and Vue Apollo
  • Using the new Vue CLI 3 for app scaffolding and deployment
  • GraphQL Syntax and creating schemas with typeDefs
  • Advanced GraphQL features like infinite scrolling and shorthand queries
  • User authentication with JSON Web Tokens
  • State management with Vuex and ApolloClient
  • Building stunning UIs with Vuetify
  • App Deployment with Heroku and Now v2
  • And many more advanced development concepts

Course Development Path

Starting with the basics of GraphQL and Apollo, we'll quickly transition into hands-on development. You will:

  1. Set up a GraphQL server and database with MongoDB Atlas
  2. Build resolver functions and client-side functionalities using Vue, Vuetify, and Apollo
  3. Execute queries and mutations, and incorporate essential application features
  4. Finally, deploy your application to the web with provided guidance on making it production-ready

The course aims to be comprehensive yet engaging, leveraging the power of GraphQL and the latest Apollo tools to enhance development ease and efficiency.

Requirements

Prerequisites:

  • A basic familiarity with Vue
  • An understanding of basic ES6 JavaScript is beneficial but not mandatory

Target Audience

Who this course is for:

  • Anyone eager to master full-stack development with Vue and GraphQL

Learning Outcomes

What you'll learn:

  • Utilize Apollo Server 2 and Apollo Boost to build robust full-stack apps
  • Implement and handle errors effectively on both client and server sides
  • Integrate session-based JWT authentication within GraphQL applications
  • Master state management by integrating Apollo with Vuex
  • Implement infinite scrolling and deploy applications using Heroku and Netlify
  • Create compelling UIs using Vuetify and contemporary JavaScript features

Join us on this exciting journey and start building sophisticated applications today!

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 82 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 82 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Preview our Completed App
All Course Lessons (82)
#Lesson TitleDurationAccess
1
Preview our Completed App Demo
18:29
2
Tools Used/Required
04:20
3
Formatting Vue Templates (And More) with VS Code
05:48
4
What is GraphQL? Using the SWAPI GraphQL API
19:52
5
What is Apollo?
02:57
6
Git Clone and Install Dependencies (Required)
02:29
7
Initializing Apollo Server 2 (Optional)
06:45
8
Adding Resolvers and Executing Queries in GraphQL Playground (Optional)
06:20
9
Writing and Running First Mutation in GraphQL Playground (Optional)
07:51
10
Exploring GraphQL Playground
03:40
11
Create MLab Database, Connect to GraphQL Server
05:33
12
Creating Mongoose Schemas
11:19
13
Creating typeDefs for Project
07:33
14
Write and Run signupUser Mutation
09:25
15
Write and Run addPost Mutation
07:26
16
Write and Run getPosts Query, Intro to populate
07:19
17
Create Vue Client with Vue-CLI 3
07:38
18
Adding Plugins with Vue GUI and Concurrently Dev Script
03:36
19
Structuring our Vue App
03:35
20
Installing Vuetify Plugin and Generating a Theme
10:14
21
Coolors.co for Creating Great Color Schemes (Optional)
04:03
22
Horizontal Navbar and Mobile First Design
11:48
23
Add Side Navbar
07:23
24
Add Routing and Page Transitions
08:36
25
Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
08:14
26
Dive into Smart Queries in Vue Components
06:43
27
Executing Queries with the ApolloQuery Component
05:35
28
Add Carousel Component to Home Page
03:27
29
Firing getPosts Action with Vuex
06:32
30
Using Mutations and Getters
07:41
31
Add Loading Property, Loading Spinner and mapGetters
05:39
32
Create queries.js for Clientside Query / Mutation Definitions
03:07
33
Create Gravatar Avatar and Hash User Passwords on Signup
07:12
34
Write and Run signinUser Mutation
05:26
35
Sign Token and Return it Upon Signin/Signup
08:00
36
Using Variables in GraphQL, Signin / Signup Mutation Defs
05:31
37
Add Signin Form, Write and Run signinUser Action, Return JWT
08:46
38
Additional Config for ApolloClient, Send Token from LocalStorage
08:09
39
Verify JWT Token in server.js, Pass Result to currentUser in Context
06:46
40
Create getCurrentUser Query, Execute it from main.js
09:04
41
Redirect Home upon Signin with Watcher
07:40
42
Change Navbar for Signed-in User
08:57
43
Create Signout Action
06:06
44
Protected Routes and Clearing Malformed Tokens
05:08
45
Adding Global Form Alert Component
08:44
46
Add Loading Spinner to Signin Button
03:16
47
Form Validation with Vuetify in Signin Component
07:10
48
Show AuthSnackbar on Signin / Signup
04:49
49
Handle Authentication Errors, Show Auth Error Snackbar
08:41
50
Create Signup Form and Signup User Action
10:48
51
Make Add Post Form
08:30
52
Create and Execute addPost Action / Mutation
10:15
53
Update and Optimistic Response for addPost Mutation
11:11
54
Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
07:46
55
Add Infinite Scroll Functionality on Client
10:17
56
Add Grid Layout / Cards for Each Post in Posts Component
09:43
57
Create Post Component and Route
04:34
58
Create and Execute getPost Query
06:31
59
Build out Post Card in Post Component
07:50
60
Add Messages Section to Post Component
05:47
61
Create addPostMessage Mutation
06:31
62
Perform addPostMessage in Post Component
08:08
63
Add Validation for Message Input, Clear on Submit
04:52
64
Create typeDefs / resolvers / queries for Like / Unlike
07:31
65
Firing Like / Unlike Post Mutations from Client
08:55
66
Add Logic for Toggling Like / Unlike Post
05:17
67
Add Like Notification in Profile Tab
04:52
68
Add typeDef / resolver / query for searchPosts
07:21
69
Fire searchPosts Action, Log Search Results
03:49
70
Add searchResults to State, Build Search Result Card
04:46
71
Finishing Search Results, Making them Functional
06:21
72
Add User Details Card / Favorites Cards
06:24
73
Write getUserPosts Query
03:41
74
Execute getUserPosts Query, Create and Populate User Cards
09:10
75
Add Edit Post Dialog for Updating User Posts
05:38
76
Create updateUserPost Mutation
07:32
77
Executing updateUserPost Mutation with Vuex Action
13:28
78
deleteUserRecipe Mutation - Backend Creation to Frontend Execution
07:26
79
RefetchQueries for Fresh Data upon Executing Mutations
04:19
80
Formatting Dates with moment
05:31
81
Minor Improvements/Fixes
07:06
82
Deploying Backend / Frontend with Now
09:51
Unlock unlimited learning

Get instant access to all 81 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription