1
Generate a MongoDB Database for a GraphQL Backend
1m 43s
2
Create a Vue 3 Project with Vite
2m 18s
3
Set Up the Apollo Client in a Vue 3 Project
2m 52s
4
Compare Vue 3 Setup Script with the Options API
2m 20s
5
Encapsulate Logic with Vue 3 Composable
3m 14s
6
Provide DefaultApolloClient from Apollo Composable to your Vue 3 App
2m 3s
7
Create a Data-Driven Vue 3 Component with Apollo
3m 45s
8
Create a Data-Driven Child Component in Vue 3
3m 52s
9
Add Routing to Your Vue 3 Application With Vue Router
3m 8s
10
Create a Dynamic Route With Vue Router
1m 22s
11
Use Template Literals with router-link to Create Dynamic Routes in Vue 3
51s
12
Pass an Id in a Vue 3 app through Query Parameters to a GraphQL Query
3m 39s
13
Create a Conditionally Rendered Modal in Vue 3
2m 32s
14
Listen for Custom Emitted Events in Vue 3 Parent Components
2m 16s
15
Create a Vue 3 Form With v-model
2m 2s
16
Create a GraphQL Mutation in GraphiQL
1m 34s
17
Use GraphQL Mutations in Vue 3 with the useMutation Composable
2m 8s
18
Use Refetch from Vue 3 useQuery Composable to Ensure Fresh Data
1m 20s
19
Handle Optimistic Updates With the Vue 3 useMutation Composable
2m 46s
20
Handle GraphQL Request Errors in Vue 3
3m 20s
21
Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable
3m 27s

Create a Data-Driven Child Component in Vue 3

Vue.js
GraphQL

Share this video with your friends

Coding all of your logic inline gets messy fast. Components are a great way to encapsulate logic and make your code a lot more readable.

In Vue, you can pass props to child components so data from the parent can drive the child component. In this lesson, the data will be the crafts from our GraphQL query that we made. We'll display the crafts and use properties on each craft to change the styling of their list item.

Create a Data-Driven Child Component in Vue 3

Share this video with your friends

Course

Create a GraphQL Powered Vue 3 Application