Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Vue JS

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
Rating: 4.2 out of 54.2 (477 ratings)
2,776 students
Created by Reed Barger
Last updated 12/2019
English
English [Auto]
30-Day Money-Back Guarantee

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

16 sections • 82 lectures • 9h 55m total length

  • Preview18:28
  • Preview04:19
  • Formatting Vue Templates (And More) with VS Code
    Preview05:47

  • What is GraphQL? Using the SWAPI GraphQL API
    19:51
  • What is Apollo?
    02:56

  • Git Clone and Install Dependencies (Required)
    02:28
  • Preview06:44
  • Adding Resolvers and Executing Queries in GraphQL Playground (Optional)
    Preview06:19
  • Writing and Running First Mutation in GraphQL Playground (Optional)
    Preview07:50
  • Preview03:39

  • Create MongoDB Atlas Database, Connect to GraphQL Server
    07:20
  • Creating Mongoose Schemas
    11:18
  • Creating typeDefs for Project
    07:32
  • Write and Run signupUser Mutation
    09:24
  • Write and Run addPost Mutation
    07:25
  • Write and Run getPosts Query, Intro to populate
    07:18

  • Create Vue Client with Vue CLI 3
    07:44
  • Adding Plugins with Vue GUI and Concurrently Dev Script
    03:35
  • Structuring our Vue App
    03:34
  • Installing Vuetify Plugin and Generating a Theme
    10:13
  • Coolors.co for Creating Great Color Schemes (Optional)
    04:02
  • Horizontal Navbar and Mobile First Design
    11:47
  • Add Side Navbar
    07:22
  • Add Routing and Page Transitions
    08:35

  • Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
    08:13
  • Dive into Smart Queries in Vue Components
    06:42
  • Executing Queries with the ApolloQuery Component
    05:34
  • Add Carousel Component to Home Page
    03:26

  • Firing getPosts Action with Vuex
    06:30
  • Using Mutations and Getters
    07:40
  • Add Loading Property, Loading Spinner and mapGetters
    05:38
  • Create queries.js for Clientside Query / Mutation Definitions
    03:06

  • Create Gravatar Avatar and Hash User Passwords on Signup
    07:11
  • Write and Run signinUser Mutation
    05:25
  • Sign Token and Return it Upon Signin/Signup
    07:59
  • Using Variables in GraphQL, Signin / Signup Mutation Defs
    05:30
  • Add Signin Form, Write and Run signinUser Action, Return JWT
    08:45
  • Additional Config for ApolloClient, Send Token from LocalStorage
    08:08
  • Verify JWT Token in server.js, Pass Result to currentUser in Context
    06:45
  • Create getCurrentUser Query, Execute it from main.js
    09:03
  • Redirect Home upon Signin with Watcher
    07:39
  • Change Navbar for Signed-in User
    08:56
  • Create Signout Action
    06:05
  • Protected Routes and Clearing Malformed Tokens
    05:07

  • Adding Global Form Alert Component
    Preview08:43
  • Add Loading Spinner to Signin Button
    03:14
  • Form Validation with Vuetify in Signin Component
    07:09
  • Show AuthSnackbar on Signin / Signup
    04:48
  • Handle Authentication Errors, Show Auth Error Snackbar
    08:40
  • Create Signup Form and Signup User Action
    10:47

  • Make Add Post Form
    08:29
  • Create and Execute addPost Action / Mutation
    10:14
  • Update and Optimistic Response for addPost Mutation
    11:10
  • Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
    07:45
  • Add Infinite Scroll Functionality on Client
    10:16
  • Add Grid Layout / Cards for Each Post in Posts Component
    09:42

Requirements

  • A basic familiarity with Vue
  • A basic understanding of ES6 JavaScript will help, but it's not required

Description

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!

Featured review

Diana Sormani
Diana Sormani
25 courses
10 reviews
Rating: 5.0 out of 511 months ago
Very clear and very simple explanations. This course is very complete from setting up VS Code to properly work with Vue, to the use of Vuex and the best practices to use GraphQL and integrate it with Vuex.

Instructor

Reed Barger
Professional Web and Mobile Developer
Reed Barger
  • 4.4 Instructor Rating
  • 8,946 Reviews
  • 38,281 Students
  • 21 Courses

I am a professional developer with a passion for learning and teaching everything I know.

I believe in learning through doing and this philosophy is present in every course that I teach.

I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry.

Looking forward to seeing you inside one of my courses!

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.