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 Vue 3 Form With v-model

Vue.js
GraphQL

Share this video with your friends

Up until this point we have been using ref for our state. But we need to create a form with multiple fields so we need to use a more complex data structure. reactive, unlike ref, does a deep comparison of the data, so we can use an array or object with it.

Then, to update our reactive data, we use the v-model property on our inputs. This keeps our data in sync with the current input value.

Create a Vue 3 Form With v-model

Share this video with your friends

Course

Create a GraphQL Powered Vue 3 Application