Learn Courses Lessons Articles

⌘K

Loading lesson

learn by doing,
two minutes at a time.

LearnCourses Lessons Articles

Watch & listenPodcasts Talks

StoriesCase studies Success stories Campaigns Browse everything →

© 2013–2026 egghead.iothe egg does not crack 🥚

all systems sunny-side up↑ Back to top

Learn Courses Lessons Articles

⌘K

Set Up the Apollo Client in a Vue 3 Project | Create a GraphQL Powered Vue 3 Application | egghead

Course

Create a GraphQL Powered Vue 3 Application

21 lessons · 53m

1Generate a MongoDB Database for a GraphQL Backend1:43
2Create a Vue 3 Project with Vite2:18
Set Up the Apollo Client in a Vue 3 Project2:52
4Compare Vue 3 Setup Script with the Options API2:20
5Encapsulate Logic with Vue 3 Composable3:14
6Provide DefaultApolloClient from Apollo Composable to your Vue 3 App2:03
7Create a Data-Driven Vue 3 Component with Apollo3:45
8Create a Data-Driven Child Component in Vue 33:52
9Add Routing to Your Vue 3 Application With Vue Router3:08
10Create a Dynamic Route With Vue Router1:22
11Use Template Literals with router-link to Create Dynamic Routes in Vue 30:51
12Pass an Id in a Vue 3 app through Query Parameters to a GraphQL Query3:39
13Create a Conditionally Rendered Modal in Vue 32:32
14Listen for Custom Emitted Events in Vue 3 Parent Components2:16
15Create a Vue 3 Form With v-model2:02
16Create a GraphQL Mutation in GraphiQL1:34
17Use GraphQL Mutations in Vue 3 with the useMutation Composable2:08
18Use Refetch from Vue 3 useQuery Composable to Ensure Fresh Data1:20
19Handle Optimistic Updates With the Vue 3 useMutation Composable2:46
20Handle GraphQL Request Errors in Vue 33:20
21Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable3:27

Course lesson

Set Up the Apollo Client in a Vue 3 Project

Before we start on the Vue-specific Apollo integration, we can set up the core of Apollo Client.

Duration: 3 min
Access: Included
Transcript: Available

Before we start on the Vue-specific Apollo integration, we can set up the core of Apollo Client.

In this lesson, we'll create a new ApolloClient configured with an in-memory cache and HTTP link to your application's GraphQL endpoint.

Access required

This lesson is available with an active egghead membership.

Sign in or subscribe

Course

Create a GraphQL Powered Vue 3 Application

21 lessons · 53m

1Generate a MongoDB Database for a GraphQL Backend1:43
2Create a Vue 3 Project with Vite2:18
Set Up the Apollo Client in a Vue 3 Project2:52
4Compare Vue 3 Setup Script with the Options API2:20
5Encapsulate Logic with Vue 3 Composable3:14
6Provide DefaultApolloClient from Apollo Composable to your Vue 3 App2:03
7Create a Data-Driven Vue 3 Component with Apollo3:45
8Create a Data-Driven Child Component in Vue 33:52
9Add Routing to Your Vue 3 Application With Vue Router3:08
10Create a Dynamic Route With Vue Router1:22
11Use Template Literals with router-link to Create Dynamic Routes in Vue 30:51
12Pass an Id in a Vue 3 app through Query Parameters to a GraphQL Query3:39
13Create a Conditionally Rendered Modal in Vue 32:32
14Listen for Custom Emitted Events in Vue 3 Parent Components2:16
15Create a Vue 3 Form With v-model2:02
16Create a GraphQL Mutation in GraphiQL1:34
17Use GraphQL Mutations in Vue 3 with the useMutation Composable2:08
18Use Refetch from Vue 3 useQuery Composable to Ensure Fresh Data1:20
19Handle Optimistic Updates With the Vue 3 useMutation Composable2:46
20Handle GraphQL Request Errors in Vue 33:20
21Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable3:27

Course lesson

Set Up the Apollo Client in a Vue 3 Project

Before we start on the Vue-specific Apollo integration, we can set up the core of Apollo Client.

How was this course?

Create a GraphQL Powered Vue 3 Application · 21 lessons watched

Your rating

1234567

Not usefulExcellent

Anything else? Optional

Duration: 3 min
Access: Included
Transcript: Available