CF

Full-Stack Vue with GraphQL - The Ultimate Guide

9h 52m 3s
English
Paid

Full-Stack Vue with GraphQL - The Ultimate Guide is a 82-lesson 9 hours 52 minutes self-paced course by Udemy. Embark on a transformative journey by building a full-stack Vue application with GraphQL from scratch.

Course facts

Lessons
82
Duration
9 hours 52 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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!

Who teaches Full-Stack Vue with GraphQL - The Ultimate Guide? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Full-Stack Vue with GraphQL - The Ultimate Guide?

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

What courses are similar to Full-Stack Vue with GraphQL - The Ultimate Guide?

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling in this course, students should have a basic understanding of JavaScript and experience with front-end development. Familiarity with Vue.js and command-line interface operations is beneficial, as the course involves using Vue CLI 3 for app scaffolding. Knowledge of REST APIs will also be helpful since the course transitions into GraphQL, a more advanced querying language.
What type of application will I build in this course?
Throughout the course, students will build a full-stack image-sharing application called VueShare. This involves setting up a GraphQL server, creating a client with Vue, and incorporating various features like user authentication, CRUD operations, and state management. The application will also utilize Vuetify for UI components and will be deployed using platforms such as Heroku and Now v2.
Who is the target audience for this course?
This course is ideal for developers who have some experience with JavaScript and Vue.js and are looking to expand their skills to include full-stack development with GraphQL. It is also suitable for those interested in learning modern app development techniques and deploying applications using GraphQL and Vue.
How does this course compare in depth to other Vue or GraphQL courses?
The course provides a comprehensive exploration of both Vue and GraphQL, integrating advanced features like infinite scrolling, user authentication with JSON Web Tokens, and state management with Vuex. Unlike some introductory courses, this course covers the full development cycle, from setting up a GraphQL server to deploying the final application, making it suitable for developers seeking a deeper understanding of full-stack development.
What specific tools and platforms are covered in the course?
Key tools and platforms covered include Apollo Server 2, Apollo Boost, Vue CLI 3, and Vue Apollo for integrating GraphQL with Vue. The course also uses MongoDB Atlas for database setup and deployment platforms like Heroku and Now v2. Students will work extensively with the GraphQL Playground for testing queries and mutations.
What topics are not covered in this course?
The course does not cover the basics of JavaScript or Vue.js, as it assumes students already have foundational knowledge in these areas. It also does not delve into other front-end frameworks like React or Angular, focusing exclusively on Vue.js and GraphQL. Additionally, advanced database management beyond MongoDB Atlas is not addressed.
What is the expected time commitment for completing this course?
The course consists of 82 lessons that guide students from the basics of GraphQL and Apollo to the deployment of a full-stack application. While the total runtime is not specified, students should allocate sufficient time to work through hands-on development exercises and projects. A commitment of several hours per week over a few months is recommended to fully grasp the material and complete the projects.